最适合悬停吗? [英] Best practive for on a hover?

问题描述

我有一个简单的功能，当您将鼠标悬停在某个元素上时，它的子元素就会出现.当用户离开(mouseout)子元素时，我将其隐藏，当用户离开(mouseout)触发器#tweeter时，我也希望其隐藏.我创建了一个小提琴 http://jsfiddle.net/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 http://jsfiddle.net/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))
    }
});

小提琴

这篇关于最适合悬停吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！