2

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

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

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

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

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

       });
     })(jQuery);
4

1 回答 1

1

最好的方法是将你的盒子和按钮都包装在一个包含元素中，并将悬停事件绑定到该元素。这是一个简单的演示，代码在这里：

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();
    });        
});​

因为事件绑定在包含元素上，所以鼠标从按钮移动到框时不会离开它。

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

于 2012-06-08T20:44:59.407 回答