Question

我不能为我的生活弄清楚如何延迟这种悬停。如果你结帐 http://forum.smartcanucks.ca当悬停的面板显示时，顶部有一个菜单。

让它们出现的CSS是

#navigation li:hover > .panel {
    display: block;
}

我正在寻找一个jQuery替代方法，以便当你将鼠标悬停在#navigation li上时，显示前会有0.5秒的延迟：block;应用于.panel，然后当你离开li元素或.panel的悬停时，在.panel返回display：none;

之前有0.3秒的延迟

我已经尝试过CSS选项但无法让它们工作，我也试图实现我在互联网上找到的不同jQuery片段无济于事。

延迟背后的原因是人们不小心在li元素上移动了鼠标，而且不需要的.panel显示很烦人。

我感谢任何帮助。

这是我试图实现的CSS选项，无法让它工作： http://jsfiddle.net/gryzzly/JWk7V/4/（这是一个例子 - 不是我的）我宁愿选择跨浏览器的jQuery解决方案。

修改

好的，我试图让.panel框只显示jquery而不是CSS

我正在尝试这个

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    $("#navigation li").hover(function() {  
        $('#navigation li:hover > .panel').addClass("displayblock");    
    },     
    function() {    
        $('.panel').removeClass("displayblock");     
    });
});
</script>

这里是类.displayblock {display：block;}

使用firebug时，displayblock类将添加到面板元素，但面板不会显示。不确定我做错了什么。

我想使用HoverIntent，但在我尝试之前，我想只使用jQuery进行面板显示。

Answer 1

我建议使用jQuery hoverintent插件 - http://cherne.net/brian/resources/jquery.hoverIntent.html

没有CSS唯一的解决方案，所以我的建议是应用一个类来允许.panel使用CSS显示，然后使用jQuery删除该类，并使用悬停事件应用相同的效果。

Answer 2

您的.panel可能会显示在页面上的另一个元素后面。尝试使用CSS z-index属性修复它。请记住为尝试将z索引应用于的元素定义“位置”。

此外，CSS3过渡完全支持delays，您可以使用它来创建这种下拉列表而不需要单行JS。

延迟悬停效果导航下拉列表面板

2 个答案: