Question

我试图在悬停时在链接上进行css转换。链接的文本应该改变颜色以及子跨度的颜色。它发生了，但跨度转换似乎仅在第一次转换完成时才开始。有什么想法吗？

<div class="transition">
    <a href="#">
       Click here
       <span class="glyphicon glyphicon-play pull-right"></span>
    </a>
</div>

.transition a,
.transition span        {
  -webkit-transition:color .2s linear;
  -moz-transition: color .2s linear;
  -o-transition: color .2s linear;
  transition: color .2s linear;
}

我尝试将两个类分成两个没有区别的。

示例：JSFIDDLE

Answer 1

转换会导致其子颜色发生变化，因此它们会一次又一次地开始转换。尽量不要在具有相同属性的转换内转换。如果您希望跨度的颜色随父项一起更改，请在跨度上使用color: inherit;而不进行转换。

Answer 2

仅举小提琴：JSFIDDLE

.transition a       {
-webkit-transition:color .2s linear;
-moz-transition: color .2s linear;
-o-transition: color .2s linear;
transition: color .2s linear;
}

链接及其子跨度上的同时CSS转换

2 个答案: