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

Question

我只想在某个元素在超时时间内取消悬停时允许悬停事件，如果鼠标重新进入悬停的元素，我希望它表现得好像鼠标从未离开过一样。

ex: 导航在 CSS 上有一个下拉菜单：悬停，如果用户鼠标错误地超出悬停元素，下拉菜单会立即消失，相反我会喜欢设置一个计时器来检查鼠标悬停是否超过 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>

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

only allow CSS hover event after timeout using JavaScript

javascript

css

hover