css - 为什么这个 CSS 过渡队列？

Question

当我将鼠标悬停在 div 上时，div 内容发生颜色变化 在 颜色变化影响 span。为什么会这样，我怎样才能让两个动画同时发生？ * { transition: ... } 的原因是网站的每个元素在默认情况下都是动画的，以防其属性发生变化。

http://jsfiddle.net/wf63jquz/

HTML:

<div>
    <span>Hello</span>
    Hola
</div>

CSS:

*,
*:before,
*:after
{
    -moz-transition: 2s;
    -o-transition: 2s;
    -webkit-transition: 2s;
    transition: 2s;
}

div {
    color: red;
}

div:hover
{
    color: green;
}

*编辑*

呃，没有想过检查其他浏览器。新问题:为什么 Chrome 会出错，如何为 Chrome 解决？我想这可能是一般的 webkit 问题，但我无法快速访问 Safari 进行检查。

Answer 1

这是因为 * .. 如果你使用下面的代码，它会给你想要的结果:

div:before,div:after{
-moz-transition: 2s;
-o-transition: 2s;
-webkit-transition: 2s;
transition: 2s;}