javascript - 悬停的最佳实践?

标签 javascript jquery css

<分区>


想改进这个问题吗? 通过 editing this post 添加细节并澄清问题.

关闭 8 年前

我有一个简单的功能,当您将鼠标悬停在一个元素上时,它的子元素就会出现。当用户离开 (mouseout) 子元素时,我会隐藏它,我也希望它在用户离开 (mouseout) 触发器时隐藏 #tweeter。我创建了一个 fiddle http://jsfiddle.net/np1cb3k0/抱歉,如果这不是很清楚,但希望您能理解我的代码!

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

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

最佳答案

主要问题是您的按钮和弹出窗口之间存在分隔。所以即使 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

关于javascript - 悬停的最佳实践?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27567672/

上一篇:javascript - 让 mydesign 填充 asp.net 页面

下一篇:html - 如果容器也有以百分比表示的最小高度,则以百分比表示的 CSS 最小高度将不起作用

相关文章:

javascript - 有没有办法压缩以下正则表达式替换? (javascript)

IE9 中的 JavaScript 错误

javascript - 如何在 javascript 中创建自定义对象?

元素的 CSS 悬停应触发相反的过渡

javascript - getElementsByTagName 不适用于每个标签

javascript - 如何使用 jquery 动态添加特定 div 中的元素。我要添加评论

jquery - 如何使用 jQuery 正确平移大于其容器的图像?

javascript - IE - select2 始终获得焦点

html - 更正带有虚线边框的框的 HTML 代码

overflow - 流体 CSS : floating column with max-width and overflow