Question

当我将鼠标悬停在div {/ 1}} 之前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; }

*编辑*
Eugh，没想到要检查其他浏览器。新问题：为什么Chrome出错了？如何解决Chrome问题呢？我想这可能是一般的webkit问题，但我没有快速访问Safari来检查。

Answer 1

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

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

Answer 2

试试这个

＆＃13;

memcpy()

＆＃13;

*,
*:before,
*:after
{
    -moz-transition: 2s;
    -o-transition: 2s;
    -webkit-transition: 2s;
    transition: 2s;
}

div, span {
    color: red;
}

div:hover, span:hover
{
    color: green;
}

＆＃13;

Answer 3

这似乎是Chrome的一个问题，因为它首先为所有标准HTML元素设置动画，然后处理剩余的内容。

要解决此问题，似乎将标记之外的内容包装在一个标记内，这样可行。所以你的HTML将是：

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

DEMO

正如@Boltclock所说，这些“怪癖”归结为过渡仍处于选秀状态这一事实，因为似乎没有人能让他们完美无缺然而：）

为什么这个CSS转换队列？

3 个答案: