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

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>