子元素上的 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;
}