为什么一个<div>中的元素在不同的时间进行颜色转换？

Question

在第一个里面我有一个段落，第二个（内部）也有一个段落。

两个段落均具有蓝色文本，并且当鼠标首先位于（悬停）上方时，颜色变为红色。颜色过渡具有动画效果。

我的问题是，两个段落的颜色都不会同时改变。第二个先变红色。我需要同时过渡。

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

在我的实际情况下，情况更加复杂，我无法从inner移走段落。从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>