jquery - 滚动条中断悬停状态，CSS

Question

我正在尝试创建一个大型导航，但我有一个我不太清楚的小错误。

我左侧的父类别有许多元素并且是可滚动的，当您将鼠标悬停在 1 个元素上时，会出现一个子导航，但是当您将光标移向它时，当光标碰到滚动条时，子导航会随着悬停状态而消失不再活跃。

我做了一个 fiddle 来展示我的意思，任何建议或解决方法都会有很大的帮助!

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;
}

这是经过编辑的 fiddle . 如果那不是你想要的，你应该像@Mark 说的那样使用 JS，如果你不想自己写超时的东西，你可以使用“hoverIntent”jQuery 插件。