悬停父元素时子元素上的 CSS 过渡答案

【问题标题】：CSS transitions on child element when hovering the parent悬停父元素时子元素上的 CSS 过渡
【发布时间】：2013-07-12 08:43:46
【问题描述】：

我试图弄清楚如何“动画”悬停元素的子元素。让它在多个浏览器上工作怎么这么复杂？
最好的做法是什么？

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

【问题讨论】：

为什么不能将两者结合起来：这意味着为什么不能在同一规则中同时拥有 transform: translate(0,-42px); 和 top:-42px;，即 .parent:hover > .child。还是我没有正确理解您的问题？

标签： html css css-transitions css-transforms

【解决方案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);
}

【讨论】：

自己应该看过。谢谢！为什么为top 属性设置动画如此痛苦？
@yardarrat CSS 职位本身就是一种痛苦。注意 tranfoerm!= top