Question

I have looked in the stackoverflow archives but could not find a solution.

The problem is I have a button when mouse is over it, it shows a box beneath it. Now if the mouse moves out of the button the box should hide, but the tricky part comes here. If the mouse leaves the button but remains on the box the box should not hide.

I am using the mouseover and mouseout functions but as soon as the mouse moves out of the button the box hides, even if i try to place the mouse over the box.

(function($) { 
      $(function() {
            var dropDown = $('.box'),
            timer,
            cartButton = $('.button');

            cartButton.hover(function(){
                 dropDown.slideToggle();
            });

       });
     })(jQuery);

Answer 1

The best way to do this is to wrap both your box and button in a containing element, and bind your hover events to that, instead. Here is a 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 the events are bound on the containing element, the mouse won’t leave it when it moves from the button to the box.

Note that the container is a block element, so takes 100% of the width, so you’ll need to either give it a fixed with, display: inline or display: inline-block.