Question

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

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

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

Answer 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

Answer 2

在mouseleave上你定位.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();
});

Answer 3

您的mouseleave事件已附加到子图标。在你首先盘旋在subicons之后它工作正常。

悬停的最佳做法？

3 个答案: