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

only allow CSS hover event after timeout using JavaScript

本文关键字：JavaScript 超时 事件 CSS 悬停      更新时间：2023-09-26

我想只允许在元素停止悬停一段时间后出现悬停事件，如果鼠标重新进入悬停的元素，我想让它表现得好像鼠标从未离开过。

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

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:: ?？

您可以使用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>

相关文章：