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悬停事件

1 个答案: