Question

我正在尝试创建一个超级导航，但我有一个小错误，我无法弄明白。

我左边的父类别有多个项目并且可以滚动，当你将鼠标悬停在1个项目上时，会出现一个子视图，但是当你将光标移向它时，当光标点击滚动条时，subnav会消失为悬停状态不久就没有了。

我做了一个小提示来表明我的意思，任何建议或变通办法都会有很大的帮助！

nav nav .products-nav .mega-nav .parent-cat {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 150px;
}

Answer 1

好的，如果你想快速修复，你可以添加direction:rtl;对你的超级导航ul和滚动条将不合适！

header #site-nav nav .mega-nav ul {
    background: #e6571d;
    width: 235px;
    float: left;
    border: 0;
    padding: 10px 0;
    direction: rtl;
}

以下是经过编辑的fiddle。如果这不是你想要的，你应该使用JS作为@Mark说，如果你不想自己编写超时内容，你可以使用“hoverIntent”jQuery插件。

Answer 2

请尝试这个：

刚刚更改了height :210px

nav nav .products-nav .mega-nav .parent-cat {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 210px;
}

DEMO

Answer 3

你需要JS。使用纯CSS是不可能的。

用户可以滚动很长时间。

您应该为mouseenter处理mouseleave和li。

内部mouseenter - 仅display:block sub-nav，但mouseleave内 - 启动计时器为500毫秒，然后display:none为sub-nav。

处理父ul - 如果计时器尚未过期 - 清理它 - 所以滚动时会显示窗口sub-nav。

Answer 4

这就是我所做的：

$(".parent-cat li").hover(function () { $(this).addClass("active").siblings(".active").removeClass("active").find(".sub-nav").css("display", "none");
    $(".active").find(".sub-nav").css("display", "block");
});

$(".products-nav").hover("", function(){
    $(".active").find(".sub-nav").css("display", "none");
});

Here is your updated JSFiddle

滚动条中断悬停状态，CSS

4 个答案: