Question

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

当我太快地将鼠标移到菜单中的上li元素时，出现问题。它打开了它的容器，但是当我将鼠标移到容器内的右边时，上一个li元素打开了它的容器！我走对了，所以我一点也不接近下li元素。对于此触发器没有意义。

当我像随机用户一样浏览菜单时，发生八分之一的情况。因此，这取决于我移动鼠标的速度。 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

这里有两件事在起作用。

首先，您是对的，动画正在发挥作用。当您从“猫”悬浮到“狗”时，“猫”子菜单开始300ms过渡到隐藏，而“狗”子菜单开始300ms过渡到可见。在这300毫秒内，“猫”子菜单实际上位于“狗”子菜单的顶部。如果删除子菜单的visibility: hidden，opacity: 0和max-height: 0属性，则可以可视化子菜单的堆叠顺序。如果删除这些属性，则可以在顶部看到“鸟”子菜单；如果将其隐藏，则将看到“猫”子菜单。如果您将其隐藏，则会看到“狗”子菜单。

在300ms的转换过程中，“猫”子菜单位于“上方” “狗”子菜单，因此，如果将鼠标悬停在子菜单上，则将鼠标悬停在“猫” li 您似乎来自“狗” 。

我要解决的第一件事是添加以下内容：

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

默认情况下，这会删除子菜单中的指针事件，而仅将指针事件提供给其父li处于hover状态的子菜单。

这只能解决部分问题。另一个问题是主导航和子菜单之间存在空格。当鼠标经过此空白时，父级li会失去其hover状态。为了解决这个问题，我摆脱了空白。

我将left和.has_children ul的{{1}}属性从li:hover > ul.extend更改为211px（又称11%的宽度）。 / p>

Here's a codepen of what I did，希望对您有所帮助。如果确实需要在主导航和子菜单之间留有空格，建议您在子菜单中添加.nav，以便获得可视空间，但实际上这些元素彼此齐平。

Answer 2

从transition: 300ms;中注释出.level2可以解决问题。

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

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

2 个答案: