时间戳

首页 > 解决方案 > 延迟 css：鼠标悬停时的悬停状态

jquery - 延迟 css：鼠标悬停时的悬停状态

问题描述

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

它是一个标准菜单，使用 CSS 制作，例如 tis：

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>

标签： jquerycssmenuhoverdelay

解决方案

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

.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

推荐阅读