css - 具有过渡和快速鼠标移动的悬停菜单问题

Question

将鼠标悬停在垂直菜单上的元素会打开一个列出我的图像的容器。这是按预期工作的，它是用纯 css 和悬停制作的。

当我将鼠标过快地移动到菜单中的上部 li 元素时，就会出现问题。它打开了它的容器，但是当我将鼠标移到容器内的右侧时，前一个 li 元素打开了它的容器!我向右走，所以我根本不靠近下部的 li 元素。对于此触发器没有意义。

当我像用户一样以随机速度浏览菜单时，每 8 次就会发生一次。所以它与我移动鼠标的速度有关。 Firefox 需要非常快的移动才能触发它。奇怪的是，它从来没有发生过降低 li 元素，总是上层菜单项，太快了，它可能是相对于我实际悬停的 li 打开的第 3 或第 4 个菜单项。如果我在 li 上等待半秒钟，它就会打开自己的容器。

我怀疑容器元素内的淡入淡出动画。看来我需要等待它们完成后再向右移动。

html:

<header class="header">
    <nav>
        <ul class="nav flex-column">
            <li class="level1 has_children"><a href="#">Dogs</a>
                <ul class="nav extend row">
                    <li class="level2 col-4 fade-in"><a href="#">Dog Food</a></li>
                    <li class="level2 col-4 fade-in"><a href="#">Dog Clothing</a></li>
                    <li class="level2 col-4 fade-in"><a href="#">Dog Toys</a></li>
                </ul>
            </li>
            <li class="level1 has_children"><a href="#">Cats</a>
                <ul class="nav extend row">
                    <li class="level2 col-4 fade-in"><a href="#">Cat Food</a></li>
                    <li class="level2 col-4 fade-in"><a href="#">Cat Clothing</a></li>
                    <li class="level2 col-4 fade-in"><a href="#">Cat Toys</a></li>
                </ul>
            </li>
            <li class="level1 has_children"><a href="#">Birds</a>
                <ul class="nav extend row">
                    <li class="level2 col-4 fade-in"><a href="#">Bird Food</a></li>
                    <li class="level2 col-4 fade-in"><a href="#">Bird Cages</a></li>
                  <li class="level2 col-4 fade-in"><a href="#">Bird Toys</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</header>

CSS:

.header {
  border-top: 2px solid #FF3F5E;

  float: left;
  width: 100%;
}

.nav {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: 1.3rem;
  width:11%;
}

nav > ul {
  background: #363636;
}

li:hover {
  background: #1d1d1d;
}
li a {
  text-decoration: none;
  display: block;
  color: #fff;
  padding: 11px;
  text-decoration: none;
}

.level1 {
  width: auto;
  float: left;
  text-transform: uppercase;
}

.level2 {
  text-transform: none;
  transition: 300ms;
}



.has_children {
}
.has_children ul {
  visibility: hidden;
  max-height: 0;
  height: auto;
  position: absolute;
  left: 211px;
  opacity: 0;
  width: 100%;
  background: inherit;
  list-style: none;
  background: #1d1d1d;
  height:240px;
  width:400px;
}
.has_children a {
  display: block;
}
.has_children a:hover {
  background: #101010;
}
.has_children > a:after {
  display: inline-block;
  margin-left: 22px;
  content: "";
  vertical-align: middle;
  border-top: 0.5rem solid #FF3F5E;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
}
.has_children:hover ul {
  visibility: visible;
  opacity: 1;
  max-height: 500px;

  transition: 100ms;
}

@-webkit-keyframes fadeInMenuItem { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeInMenuItem { from { opacity:0; } to { opacity:1; } }
@keyframes fadeInMenuItem { from { opacity:0; } to { opacity:1; } }

.has_children:hover ul li.fade-in {
  opacity:0;
}

.has_children:hover ul li.fade-in {
    -webkit-animation:fadeInMenuItem ease-in 1;
  -moz-animation:fadeInMenuItem ease-in 1;
  animation:fadeInMenuItem ease-in 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:400ms;
  -moz-animation-duration:400ms;
  animation-duration:400ms;
}

.has_children:hover ul li:nth-child(1) {
  animation-delay:50ms;
}

.has_children:hover ul li:nth-child(2) {
  animation-delay:100ms;
}
.has_children:hover ul li:nth-child(3) {
  animation-delay:150ms;
}
.has_children:hover ul li:nth-child(4) {
  animation-delay:200ms;
}

.has_children:hover ul li {
  visibility: visible;
}

.extend {
  width:49vw;
  left:353px;
  position: absolute;
  top:0;
  height:335px;
}

li:hover > ul.extend {
    width:520px
    height: 230px;
    position:absolute;
    left: 211px;
    transition: 100ms;
}

https://codepen.io/volkanqq/pen/PrEEXq

只要从猫到狗然后向右，如果你足够快，你会看到狗变成猫!

Answer 1

这里有几件事在起作用。

首先，您是对的，动画正在发挥作用。当您从悬停“猫”更改为“狗”时，“猫”子菜单开始 300 毫秒过渡到隐藏，而“狗”子菜单开始 300 毫秒过渡到可见。在这 300 毫秒内，“猫”子菜单实际上位于“狗”子菜单之上。如果移除子菜单的 visibility: hidden、opacity: 0 和 max-height: 0 属性，您可以看到子菜单的堆叠顺序。如果你删除这些属性，那么你可以看到“Birds”子菜单在顶部——如果你隐藏它，那么你会看到“Cats”子菜单。如果你隐藏它，那么你会看到“狗”子菜单。

在这 300 毫秒的过渡期间，“Cats”子菜单位于“Dogs”子菜单上方，因此如果您将鼠标悬停在子菜单上，那么您将悬停在“Cats”li 即使你看起来来自“狗”。

我做的第一件事就是添加以下内容:

.level1 > ul {
   pointer-events: none;
}
.level1:hover > ul {
  pointer-events: all;
}

默认情况下，这会从子菜单中移除指针事件，并且只将指针事件提供给其父 li 处于 hover 状态的子菜单。

但这只能解决部分问题。另一个问题是主导航和子菜单之间有空白。当鼠标经过这个空格时，父 li 失去它的 hover 状态。为了解决这个问题，我去掉了那个空格。

我从 211px 更改了 .has_children ul 和 li:hover > ul.extend 的 left 属性到 11%(也就是 .nav 的宽度)。

Here's a codepen of what I did ， 希望能帮助到你。如果您确实需要主导航和子菜单之间的空白，我建议将 padding-left 添加到子菜单，这样您就有了视觉空间，但实际上元素彼此齐平。