Question

我有一个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>

Answer 1

您可以对位使用延迟过渡，以使其在悬停状态下保持可见：

.as-console-wrapper { max-height: 100% !important; top: 0; }

.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

Answer 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>

注意：我将类“ menu”赋予了ul，因此更改了CSS类。请相应地更改代码

Answer 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>

在mouseout上延迟css：hover状态

3 个答案: