胡佛的最佳做法？ [关闭]答案

【问题标题】：Best practive for on a hover? [closed]胡佛的最佳做法？ [关闭]
【发布时间】：2014-12-19 23:33:40
【问题描述】：

我有一个简单的功能，当你将鼠标悬停在一个元素上时，它的子元素就会出现。当用户离开（mouseout）子元素时，我将其隐藏，我还希望它在用户离开（mouseout）触发器#tweeter时隐藏。我创建了一个小提琴http://jsfiddle.net/np1cb3k0/ 抱歉，如果这不是很清楚，但希望你能理解我的代码！

$('#tweeter').on('mouseenter', function(e){
    e.preventDefault();
    $(this).find('ul').show();
});

$('.subicons').mouseleave(function(){
    $(this).hide();
});

【问题讨论】：

那么...是不是坏了？
为什么不用css实现呢？
@AnupamBasak 他实现它的方式，他不能。按钮和弹出窗口之间有一个空格。
最佳实践是尽可能使用 CSS 伪悬停。如果您每次都使用.find('ul') 遍历dom，那么悬停会变得昂贵。您需要转换为 CSS 的帮助吗？

标签： javascript jquery css

【解决方案1】：

主要问题是您的按钮和弹出窗口之间存在分离。因此，即使 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))
    }
});

Fiddle

【讨论】：

【解决方案2】：

在鼠标离开时，您将目标指向 .subicons 类而不是“#tweeter”试试这个http://jsfiddle.net/np1cb3k0/5/

$('#tweeter').on('mouseenter', function(e){
    //console.log('OOSH');
    e.preventDefault();
    $(this).find('ul').show();
});


$('#tweeter').mouseleave(function(){
    $(this).children('ul').hide();
});

【讨论】：

与第一个答案相同的问题......测试它尝试点击一个子图标
我实际上并没有完全理解他在问什么以及他的问题是什么

【解决方案3】：

您的 mouseleave 事件已附加到子图标。在您先将鼠标悬停在子图标上后，它工作正常。

【讨论】：