悬停父项时子元素上的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); 
}