Question

我有两个元素，一个嵌套在另一个元素中。这两个元素有不同的过渡效果，我喜欢当鼠标移出父元素时反转效果顺序。

我的代码如下所示：

.parent {
  width : 200px;
  height : 200px;
  background-color : #AF0;
  position : relative;
  transition: background-color 0.22s ease-out;
}

.child {
  width : 100px;
  height : 100px;
  position : absolute;
  left : 0;
  top : 0;
  background : #0AF;
  transition: all 0.22s ease-out 1s;
}

.parent:hover {
  background-color : #FA0;
}

.parent:hover .child {
  width : 200px;
  height : 200px;
  background: #0FA;
}

<div class="parent">
  <div class="child">
  </div>
</div>

正如您所看到的，此代码在我将鼠标悬停一秒钟时正常执行。

问题在于鼠标何时出局。父元素的颜色变化太快，然后子元素再次缩小。

那么，是否有任何解决办法只通过使用CSS来实现这种效果？

Answer 1

您需要在转场中添加transition-delay，并使其与正常和悬停不同。

孩子需要在悬停时等待1秒，但在mouseout上立即运行

父母需要在悬停时立即运行，但在mouseout上等待1秒，因此子进程首先运行。

.parent {
  width : 200px;
  height : 200px;
  background-color : #AF0;
  position : relative;
  transition: background-color 0.22s ease-out;
  /* delay for mouseout - wait 1s for child to finish */
  transition-delay: 1s;
}

.child {
  width : 100px;
  height : 100px;
  position : absolute;
  left : 0;
  top : 0;
  background : #0AF;
  transition: all 0.22s ease-out;
  /* delay for mouseout - run immediately */
  transition-delay: 0s;
}

.parent:hover {
  background-color : #FA0;
  /* delay for mousein - run immediately */
  transition-delay: 0s;
}

.parent:hover .child {
  width : 200px;
  height : 200px;
  background: #0FA;
  /* delay for mousein - wait 1s for parent */
  transition-delay:1s;
}

<div class="parent">
  <div class="child">
  </div>
</div>

Answer 2

选中此fiddle

＆＃13;

    .parent {
  width : 200px;
  height : 200px;
  background-color : #AF0;
  position : relative;
  transition: background-color 0.5s ease-out;
}

.child {
  width : 100px;
  height : 100px;
  position : absolute;
  left : 0;
  top : 0;
  background : #0AF;
  transition: all 0.22s ease-out 0.2s;
}

.parent:hover {
  background-color : #FA0;
  transition: background-color 0.22s ease-out
}

.child:hover  {
  width : 200px;
  height : 200px;
  background: #0FA;
  transition: background-color 0.50s ease-out
}

＆＃13;

<div class="parent">
  <div class="child">
  </div>
</div>

＆＃13;

希望这有助于：）

是否有可能在鼠标移出时反转转换执行？

2 个答案: