1

我一辈子都想不通如何延迟这种悬停。如果您结帐 http://forum.smartcanucks.ca，当悬停面板显示时，顶部会有一个菜单。

使它们显示的 CSS 是

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

我正在寻找一个 jQuery 替代方案，以便当您将鼠标悬停在 #navigation li 上时，在 display:block; 之前有 0.5 秒的延迟；应用于 .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 来显示面板。

4

2 回答 2

0

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

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

于 2012-04-04T00:35:02.097 回答
0

您的 .panel 可能显示在页面上另一个元素的后面。尝试使用 CSS z-index 属性来解决这个问题。请记住为您尝试应用 z-indexes 的元素定义一个“位置”。

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

于 2012-04-05T13:22:35.427 回答