我查看了stackoverflow存档但找不到解决方案。
问题是当鼠标悬停在它上面时我有一个按钮,它在它下方显示一个框。现在,如果鼠标移出按钮,框应隐藏,但棘手的部分来到这里。如果鼠标离开按钮但仍留在盒子上,则该框不应隐藏。
我正在使用鼠标悬停和鼠标输出功能,但是只要鼠标移出按钮,该框就会隐藏,即使我尝试将鼠标放在盒子上。
(function($) {
$(function() {
var dropDown = $('.box'),
timer,
cartButton = $('.button');
cartButton.hover(function(){
dropDown.slideToggle();
});
});
})(jQuery);
答案 0 :(得分: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
来修复它。