悬停父元素时，子元素上的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/ 在火狐浏览器中可用。
或者

.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浏览器中使用

- yardarrat

---

为什么不能将这两个组合起来：也就是为什么不能在同一个规则内（即 .parent:hover > .child）同时使用 transform: translate(0,-42px); 和 top:-42px;？或者我没有正确理解你的问题？ - vee

Answer 1

transform不是跨浏览器兼容的，仍然需要针对特定的浏览器进行调整。

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

- raam86

---

我应该自己看到的。谢谢！为什么动画化top属性这么麻烦呢？ - yardarrat

@yardarrat CSS的定位本身就很麻烦。请注意，tranfoerm！= top。 - raam86