我有一个简单的功能,当您将鼠标悬停在某个元素上时,它的子元素就会出现.当用户离开(mouseout)子元素时,我将其隐藏,当用户离开(mouseout)触发器#tweeter时,我也希望其隐藏.我创建了一个小提琴 jsfiddle/np1cb3k0/很抱歉,如果这不是很清楚,但希望您能理解我的代码!
I have this simple function that when you hover over an element its child element appears. When the user leaves (mouseout) the child element I then hide this, I also want it to hide when the user leaves (mouseout) the trigger #tweeter. I've created a fiddle jsfiddle/np1cb3k0/ sorry if this isn't very clear, but hopefully you will understand my code!
$('#tweeter').on('mouseenter', function(e){ e.preventDefault(); $(this).find('ul').show(); }); $('.subicons').mouseleave(function(){ $(this).hide(); });推荐答案
主要问题是按钮和弹出窗口之间存在分隔.因此,即使ul是#tweeter的子代,由于它们彼此都不抱抱,因此会触发mouseout.
The main problem is that there is a separation between your button and the pop up. So even if the ul is a child of #tweeter, since they are not hugging each other, the mouseout is triggered.
我建议您在鼠标移开时使用一个小的超时时间.您将鼠标悬停时清除的超时.这样可以在弹出窗口上保留一些时间,并阻止hide().
What i suggest you is to use a small timeout on the mouse out. A timeout that you clear on the mouse over. That will allow some time to go on the popup and prevent the 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)) } });小提琴
更多推荐
最适合悬停吗?
发布评论