在兄弟姐妹之间切换悬停时，如何避免过渡延迟

Question

在没有JavaScript 的情况下，在兄弟姐妹之间切换悬停时，如何避免过渡延迟？

我的目标是生产具有以下行为的大型菜单：

1. 如果用户徘徊在给定的Mega菜单上1.5秒，则菜单将打开。
2. 如果用户将鼠标完全从Mega菜单中移开，则MEGA菜单会立即关闭。
3. 如果用户将鼠标从一个巨型菜单项移动到另一个Mega菜单项，则第二个菜单替换了第一个菜单。

我的当前变化（如下所示）具有以下行为（差异为粗体）：

1. 如果用户徘徊在给定的Mega菜单上1.5秒，则菜单将打开。
2. 如果用户将鼠标完全从Mega菜单中移开，则MEGA菜单会立即关闭。
3. 如果用户将鼠标从一个巨型菜单项移动到另一个Mega菜单项，则第一个菜单保持1.5秒。然后，第二个菜单替换了第一个菜单。

它也有定位的故障，但我现在忽略了这些小故障。这只是一个原型。

这很容易通过JavaScript完成，但是我的目标是纯粹使用CSS3。

.power > div {
    display:inline-block;height:25px;background-color:lightblue;
    padding:0;margin:0
}
.hider {
  position:absolute;top:-999px;
  width:80%;
  background-color:pink;
}
.power div:hover .hider {
  top:25px;
  left:0px;
  transition: all 0s 1.5s;
}
.power:hover div .hider{
  background-color:orange;
  transition: all 0s 1.5s;
}

<div class="power">
  <div class="one">Menu-One
    <div class="hider"><br/></br/>One</div>
  </div>
  <div class="two">Menu-Two
    <div class="hider"><br/></br/>Two</div>
  </div>
</div>

Answer 1

您可以通过使用opacity进行此操作，例如，您对每个子菜单的不透明度延迟（影响全部）和单个重新定位（没有过渡）

.power > div {
  display: inline-block;
  height: 25px;
  background-color: lightblue;
  padding: 0;
  margin: 0
}
.hider {
  position: absolute;
  top: -999px;
  opacity: 0;
  width: 80%;
  background-color: pink;
}
.power div:hover .hider {
  left: 0px;
  top: 25px;
}
.power:hover div .hider {
  opacity: 1;
  background-color: orange;
  transition: opacity 0s 1.5s;
}

<div class="power">
  <div class="one">Menu-One
    <div class="hider">
      <br/>
      <br/>One
    </div>
  </div>
  <div class="two">Menu-Two
    <div class="hider">
      <br/>
      <br/>Two
    </div>
  </div>
</div>