当鼠标悬停在父元素上时,CSS转换为子元素

时间:2013-07-14 09:18:28

标签: html5 css3 css-transitions css-transforms

我正在试图弄清楚如何“动画”悬停元素的孩子。如何让它在多个浏览器中工作变得如此复杂? 什么是最佳做法?

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

1 个答案:

答案 0 :(得分:5)

转换不是跨浏览器兼容的,您仍然需要针对特定​​的浏览器。

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