javascript - jQuery hover, onhover show another element and move the mouse back -
when on hover red box, grey box show up. if mouse stay on grey box, grey box stays opened. when move mouse grey box red box, want have grey box still opened.
grey box closes when mouse not hovered on red or grey box.
the problem that, when move mouse grey box red box, can't grey stayed show.
can please help? please not change structure, understand have box2 wrapped box1 easier,
<div id="box1"> <div id="box2"></div> </div> but isn't wanted try. thanks
i think can use
var timeout; var $box1 = $('#box1'); var $box2 = $('#box2'); $box1.hover(function() { cleartimeout(timeout); $box2.show(); }, function() { timeout = settimeout(function() { $box2.hide(); }, 1000); }); $box2.hover(function() { cleartimeout(timeout); }, function() { timeout = settimeout(function() { $box2.hide(); }, 1000); });#box1 { width: 40px; height: 40px; background: red; cursor: pointer; } #box2 { display: none; width: 400px; height: 400px; background: grey; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="box1"></div> <div id="box2"></div>
Comments
Post a Comment