懸停父項時子元素上的CSS轉換

Question

我試圖弄清楚如何「動畫」懸停元素的子項。如何讓它跨越多個瀏覽器工作如此複雜？
最佳做法是什麼？

.parent { 
    -moz-transition:-moz-transform 180ms; 
    -webkit-transition:-webkit-transform 180ms; 
    -o-transition:-o-transform 180ms; 
    transition:transform 180ms; 
} 
.parent:hover > .child { 
    transform: translate(0,-42px); 
} 

http://jsfiddle.net/KKrdA/2/在Firefox
或

.parent { 
    -moz-transition:top 180ms; 
    -webkit-transition:top 180ms; 
    -o-transition:top 180ms; 
    transition:top 180ms; 
} 
.parent:hover > .child { 
    top:-42px; 
} 

http://jsfiddle.net/KKrdA/1/作品與WebKit瀏覽器

Answer 1

變換是不是跨瀏覽器兼容，你還是要針對特定​​的瀏覽器。

.parent:hover > .child { 
    transform: translate(0,-42px); 
    -webkit-transform: translate(0,-42px); 
    -moz-transform: translate(0,-42px); 
    -o-transform: translate(0,-42px); 
    -ms-transform: translate(0,-42px); 
}