<分区>
标签 javascript jquery css
我有一个简单的功能,当您将鼠标悬停在一个元素上时,它的子元素就会出现。当用户离开 (mouseout
) 子元素时,我会隐藏它,我也希望它在用户离开 (mouseout
) 触发器时隐藏 #tweeter
。我创建了一个 fiddle http://jsfiddle.net/np1cb3k0/抱歉,如果这不是很清楚,但希望您能理解我的代码!
$('#tweeter').on('mouseenter', function(e){
e.preventDefault();
$(this).find('ul').show();
});
$('.subicons').mouseleave(function(){
$(this).hide();
});
最佳答案
主要问题是您的按钮和弹出窗口之间存在分隔。所以即使 ul
是 #tweeter
的子级,因为它们没有拥抱彼此,mouseout
被触发。
我建议您在鼠标移出时使用一个小的超时时间。您在鼠标悬停时清除的超时。这将留出一些时间继续弹出窗口并防止 hide()
。
类似的东西:
$('#tweeter').on({
mouseenter : function(e){
var $this = $(this);
clearTimeout($this.data('_timer'));
$(this).find('ul').show();
},
mouseleave : function(){
var $this = $(this);
$this.data('_timer', setTimeout(function(){
$this.find('ul').hide();
},1000))
}
});
关于javascript - 悬停的最佳实践?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27567672/
相关文章:
javascript - 有没有办法压缩以下正则表达式替换? (javascript)
javascript - 如何在 javascript 中创建自定义对象?
javascript - getElementsByTagName 不适用于每个标签
javascript - 如何使用 jquery 动态添加特定 div 中的元素。我要添加评论
jquery - 如何使用 jQuery 正确平移大于其容器的图像?
javascript - IE - select2 始终获得焦点
overflow - 流体 CSS : floating column with max-width and overflow