javascript - applying a timed hold after mouseover to a css hover element -
javascript - applying a timed hold after mouseover to a css hover element -
this simple using javascript or jquery, cannot wrap head around it. providing sample using simple css box :hover applied in different color. want box go hover would, want hover lastly set amount of time, regardless of mouse motion after hover. after set time has finished, hover reset normal. if user accidentally hover on #box while hover beingness held not reset, go on hold until after set time has finished.
here html , css
#box { width: 200px; height:300px; background-color: #00ccff; } #box:hover { width: 200px; height:300px; background-color: #669933; } <!doctype html> <html> <head> </head> <body> <div id="box" </div> </body>
css
.box-normal { width: 200px; height:300px; background-color: #00ccff; } .box-hover { width: 200px; height:300px; background-color: #669933; } html
<!doctype html> <html> <head> </head> <body> <div id="box" class="box-normal"> dsfdsf</div> </body> jquery
$(function() { var delayms = 2000; $("#box").mouseenter(function(){ if ($("#box").hasclass('box-normal')) { $("#box").removeclass('box-normal').addclass('box-hover'); window.settimeout(function() { $("#box").removeclass('box-hover').addclass('box-normal'); }, delayms); } }); }); you can alter "delayms" variable. ( 2000 means 2 seconds)
working example: http://jsfiddle.net/jqt7d/1/
also jfriend00 suggests simpler version: http://jsfiddle.net/jfriend00/jqt7d/3/
javascript jquery css
Comments
Post a Comment