jQuery show a Box on MouseOver, Donot Hide if MouseOver the Box -
i have looked in stackoverflow archives not find solution.
the problem have button when mouse on it, shows box beneath it. if mouse moves out of button box should hide, tricky part comes here. if mouse leaves button remains on box box should not hide.
i using mouseover , mouseout functions mouse moves out of button box hides, if try place mouse on box.
(function($) { $(function() { var dropdown = $('.box'), timer, cartbutton = $('.button'); cartbutton.hover(function(){ dropdown.slidetoggle(); }); }); })(jquery);
the best way wrap both box , button in containing element, , bind hover events that, instead. here simple demonstration, code here:
html:
<div class="container"> <input type="button" value="hover here"> <div class="box"> box content </div> </div>
jquery:
$(document).ready(function() { $('.container').hover(function() { $(this).children('.box').show(); }, function() { $(this).children('.box').hide(); }); });
because events bound on containing element, mouse won't leave when moves button box.
note container block element, takes 100% of width, you'll need either give fixed with, display: inline
or display: inline-block
.
Comments
Post a Comment