jQuery 在鼠标悬停时显示一个框，如果鼠标悬停在该框上则不隐藏

Question

我查看了 stackoverflow 文件，但找不到解决方案。

问题是我有一个按钮，当鼠标悬停在它上面时，它下面显示一个框。现在，如果鼠标移出按钮，该框应该隐藏，但棘手的部分就在这里。如果鼠标离开按钮但仍停留在框上，则框不应隐藏。

我正在使用鼠标悬停和鼠标移出功能，但一旦鼠标移出按钮，即使我尝试将鼠标放在该框上，该框也会隐藏。

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

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

       });
     })(jQuery);

Answer 1

执行此操作的最佳方法是将框和按钮包装在包含元素中，并将悬停事件绑定(bind)到该元素。 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();
    });        
});​

由于事件绑定(bind)在包含元素上，因此当鼠标从按钮移动到框时，鼠标不会离开它。

请注意，容器是一个 block 元素，因此占用 100% 的宽度，因此您需要为其指定固定的 display: inline 或 display: inline - block 。