Javascript 最佳悬停练习？

我有一个简单的函数，当你将鼠标悬停在一个元素上时，它的子元素就会出现。当用户离开（

mouseout

）子元素时，我会将其隐藏，我还希望在用户离开（

mouseout

）触发器时将其隐藏。我已经创建了一个小提琴对不起，如果这不是很清楚，但希望你能理解我的代码

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

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

---

鼠标移动事件将附加到子图标。首先将鼠标悬停在子图标上后，它可以正常工作

在mouseleave上，您的目标是.subicons类而不是“#tweeter”，请尝试以下操作

---

主要的问题是你的按钮和弹出窗口之间有一个分隔。因此，即使

ul

是

#tweeter

的孩子，由于他们没有相互拥抱，也会触发

鼠标出键

我建议您在鼠标退出时使用一个小的超时。在鼠标上方清除的超时。这将给弹出窗口留出一些时间，并防止
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))
    }
});

所以。。。有些东西坏了吗？你为什么不用css实现它？@AnupamBasak他实现它的方式，他不能。按钮和弹出窗口之间有一个空格。最佳做法是在可以的地方使用CSS伪悬停。如果每次使用
.find（'ul'）
遍历dom，则悬停代价会很高。你想帮忙转换成CSS吗？和第一个答案一样的问题……测试它试着点击一个subiconi实际上不明白他在问什么，他的问题是什么
$('#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))
    }
});