CSS3轉換子元素上不工作

Question

這裏是我的CSS：

#sort_dropdown:hover > .arrow{ 
    -webkit-transform: translate(0,-42px); 
    -moz-transform: translate(0,-42px); 
    -o-transform: translate(0,-42px); 
    transform: translate(0,-42px); 

} 

這裏是我的代碼：

<li><a id="sort_dropdown">Sortieren <span class="arrow">&darr;</span><span class="arrow" style="display: none;">&uarr;</span></a> 

Answer 1

變換隻在塊級的顯示元件的工作。設置.arrow到display: inline-block（默認爲跨越顯示inline）的伎倆（jsFiddle demo）：

.arrow { 
    display: inline-block; 
}