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

Question

如果在没有javascript 的兄弟姐妹之间切换悬停时，如何避免转换延迟？

我的目标是制作一个具有以下行为的大型菜单：

1. 如果用户将鼠标悬停在给定的超级菜单上1.5秒，菜单将会打开。
2. 如果用户完全将鼠标从大型菜单移开，则大型菜单会立即关闭。
3. 如果用户将鼠标从一个兆菜单项移动到另一个菜单项，则第二个菜单将替换第一个菜单。

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

1. 如果用户将鼠标悬停在给定的超级菜单上1.5秒，菜单将会打开。
2. 如果用户完全将鼠标从大型菜单移开，则大型菜单会立即关闭。
3. 如果用户将鼠标从一个超级菜单项移动到另一个菜单项，第一个菜单将保持打开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>