延迟 css：鼠标悬停时的悬停状态答案

【问题标题】：Delay the css:hover state on mouseout延迟 css：鼠标悬停时的悬停状态
【发布时间】：2018-12-19 08:56:44
【问题描述】：

我有一个 2 级下拉菜单，鼠标必须在非常狭窄的走廊上移动才能保持菜单打开，如果它偏离轨道，菜单会意外关闭，这很令人沮丧。我想让菜单不立即关闭，而是延迟关闭。

这是一个标准的菜单，像 tis 一样用 css 制作：

ul.menu li ul {
    display: none;
}
ul.menu li:hover ul {
    display:block;
}

我需要当没有更多的悬停状态时，菜单仍然可见至少 0.5 秒。

试过了，还是不行：

<script>
$( ".menu li" ).mouseout(function() {
    $(".menu li ul").css("display: block");
    $(".menu li ul").css.setTimeout("display: none", 2000);
});
</script>

【问题讨论】：

有办法添加一个display:block property with jqerry for 0.5 seconds after mouseout？
@Pete 这绝对比我的更干净，我将删除我的答案并记住你的答案;)
不知道为什么重新打开。这显然是重复的，答案与建议的问答中的完全相同相同
@Paulie_D 抱歉，我重新打开了它，因为欺骗中没有一个答案显示如何将淡出延迟半秒 - 他们只是展示了如何将显示块转换为无过渡
添加延迟只是对欺骗的一个小扩展，不值得重新打开这样一个明显的欺骗。

标签： jquery css menu hover delay

【解决方案1】：

您可以对位使用带有延迟的过渡，以使其在悬停时保持可见：

.nested {
  pointer-events:none;       /* this is so it behaves like display none and mouse does not interact with child when hidden */
  opacity: 0;
  transition: opacity 0.1s;  /* change length to longer for a nicer fade */
  transition-delay: 1s;      /* fadeout won't happen for a second */
}
.hover:hover .nested {
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.1s;    /* fade in when hovered */
  transition-delay: 0s;        /* fade in immediately */
}

<div class="hover">
  hover
  <div class="nested">
  nested
  </div>
</div>

在上面，您的ul 将是.nested，您的父级li 将是.hover

【讨论】：

【解决方案2】：

试试这个：使用CSS3的transition属性和可见性，你可以使它平滑。根据您的要求增加转换时间（以秒为单位）。

ul.menu li ul {
  visibility: hidden;
  opacity: 0;
}
ul.menu li:hover ul {
  visibility: visible;
  transition: visibility 0s, opacity 1.5s linear;
  opacity: 1;
}

<ul class="menu">
  <li>Menu
     <ul>
      <li>Menu inside menu</li>
     </ul>
  </li>
</ul>

注意：我已将“菜单”类赋予 ul，因此更改了 css 类。请相应地更改您的代码

【讨论】：

OP 需要相反：悬停状态结束时的延迟，而不是开始时...注意问题。
@sjahan，我确实以其他方式理解。在这种情况下，OP 可以反转 CSS。我已经在我的帖子中更新了它。请看
谢谢你，这是有效的，我只是将过渡添加到 ul.menu li ul，而不是 :hover 来反转。

【解决方案3】：

你可以像这样使用过渡：

ul.menu {
  position: relative;
  background: lime;
  width: 150px;
}

ul.menu li ul {
  position: absolute;
  background: red;
  visibility: hidden;
  opacity: 0;
  right: 0;
  margin-top: -14px;
  transition: visibility 1.5s linear 1s, opacity 1.5s linear 1s;
}

ul.menu li:hover ul {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0s;
}

<ul class="menu">
  <li>
    link a
  </li>
  <li>
    link b
    <ul>
      <li>link b - 1</li>
      <li>link b - 2</li>
    </ul>
  </li>
  <li>
    link c
  </li>
</ul>

【讨论】：