Question

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

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

我正在使用鼠标悬停和鼠标输出功能，但是只要鼠标移出按钮，该框就会隐藏，即使我尝试将鼠标放在盒子上。

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

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

       });
     })(jQuery);

Answer 1

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

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

请注意，容器是一个块元素，因此需要100％的宽度，因此您需要使用display: inline或display: inline-block来修复它。

jQuery在MouseOver上显示一个Box，Donot Hide如果MouseOver是Box

1 个答案: