只允许使用 JavaScript 超时后的 CSS 悬停事件

Question

我只想在元素未悬停一段时间后才允许悬停事件，如果鼠标重新进入悬停的元素，我希望它的行为就像鼠标从未离开一样。

ex: 导航在 CSS :hover 上有一个下拉菜单，如果用户的鼠标错误地超出了悬停的元素，下拉菜单会立即消失，相反我想设置一个计时器来检查是否鼠标悬停超过 500 毫秒，如果是这样，请关闭下拉菜单；如果鼠标在该时间段内重新进入，则停止关闭事件并保持菜单打开。

HTML::

<nav>
  <ul>
    <li>ghetto nav item 1
      <ul>
        <li>awful Dropdown item</li>
      </ul>
    </li>
    <li>ghetto nav item 2</li>
  </ul>
</nav>

CSS::

nav > ul > li > ul > li {
    display: none;
}
nav > ul > li:hover + ul > li {
    display: block;
}

JS:: ??

Answer 1

您可以使用 CSS3 做到这一点。将transition-delay 与元素的height 一起应用，而不是切换display：

nav > ul > li > ul > li {
  transition-delay: 0.5s;
  height: 0px;
  overflow: hidden;
}

nav > ul > li:hover > ul > li {
  transition-delay: 0s;
  height: 100%;
}

<nav>
  <ul>
    <li>ghetto nav item 1
      <ul>
        <li>awful Dropdown item</li>
      </ul>
    </li>
    <li>ghetto nav item 2</li>
  </ul>
</nav>