最适合悬停吗?

本文介绍了最适合悬停吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个简单的功能，当您将鼠标悬停在某个元素上时，它的子元素就会出现.当用户离开(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)) } });

小提琴