滚动条中断悬停状态，CSS

Question

我正在尝试创建一个大型导航，只是我有一个小错误，我不能完全弄清楚。

我左边的父类别有许多项目，并且是可滚动的，当你将鼠标悬停在一个项目上时，一个子导航出现，但是当你将光标移向它时，当光标击中滚动条时，子导航消失，因为悬停状态不再活跃。

我做了一个小提琴来显示我的意思，任何建议或解决方法将是一个很大的帮助!http://jsfiddle.net/j45zx3tr/1/

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

Answer 1

好的，如果你想快速修复，你可以添加direction:rtl;到你的超级导航和滚动条将离开你的方式!

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

这是编辑后的小提琴。如果这不是你想要的，你应该使用JS @Mark说，如果你不想自己写超时的东西，你可以使用"hoverIntent" jQuery插件

Answer 2

请试试这个:

只是你改变了height :210px

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

演示

Answer 3

我是这样做的:

$(".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");
});

这是你更新 JSFiddle

Answer 4

你需要JS。这在纯CSS中是不可能的。

用户可以长时间滚动。

为li处理mouseenter和mouseleave。

在mouseenter内部- sub-nav只是display:block，但在mouseleave内部-启动定时器为500 ms，然后display:none为sub-nav。

和父ul的处理-如果计时器没有过期-清理它-这样窗口sub-nav将显示在滚动