鏈接及其子跨度同時進行CSS轉換

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; 
}