为什么在一个元素的不同时间进行颜色转换 ?

Question

首先我有段落，第二（内）也有段落。

两个段落都有蓝色文本，当鼠标悬停在第一个（悬停）时，颜色变为红色。颜色过渡是动画的。

我的问题是颜色在两个段落中不会同时改变。第二次变成红色。我需要在同一时间过渡。

为了避免问题，我必须将第二段从内部移动到第一段。或者从CSS中删除star *（下面的示例代码）。

在我的实际情况中，情况更复杂，我无法从内部移动段落。从CSS中删除星没有任何变化。

问题在Chrome上比FireFox更明显。

我无法展示真实的例子，所以下面很简单。但它显示了延迟第二段过渡的问题。

.first_div {color: #00f }
.first_div:hover { color: #f00 }
.first_div * { transition: color 800ms linear }

<div class="first_div">
  <p>first</p>
  <div>
    <p>second</p>
  </div>
</div>

你可以在https://jsfiddle.net/xwzt4pyL/2/上测试代码

如何动画并行转换动画？

Answer 1

这样做

将转换放在第一个div上，不需要在第一个div中定位所有内容，因为转换将应用其中的所有内容并且它将同时应用它而不是排队转换

.first_div {
  color: #00f;
  transition: color 800ms linear;
}

.first_div:hover {
  color: #f00;
}

<div class="first_div">
  <p>first</p>
  <div>
    <p>second</p>
  </div>
</div>