css - 如何在嵌套元素上并行创建两个 CSS 过渡

Question

尝试使用 Bootstrap 字形图标创建一个简单的链接。悬停时，a 的 background-color 以及字形图标的字体 color 都会发生变化。

但是，当尝试添加 css transition 时，转换一个接一个地出现(首先是 bgcolor，然后是内容的颜色)，而不是并行出现。

我试过:

.alltransition, .alltransition *
{
-webkit-transition:background-color .2s linear, color .2s linear;
-moz-transition: background-color .2s linear, color .2s linear;
-o-transition: background-color .2s linear, color .2s linear;
transition: background-color .2s linear, color .2s linear;
}

和

.alltransition, .alltransition *
{
-webkit-transition:all .2s linear;
-moz-transition:all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}

html

<a class="play alltransition" href="#">
    <span class="glyphicon glyphicon-play"></span>
</a>

JS FIDDLE

Answer 1

您是否尝试删除 .alltransition * ？还是您的目标是 <span>有自己的过渡？

所以你的 .alltransition类看起来像这样 -

.alltransition{
    -webkit-transition:all .2s linear;
    -moz-transition:all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
}

Fiddle

Fiddle - span color change