Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/34.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 悬停父元素时子元素上的CSS转换_Html_Css_Css Transitions_Css Transforms - Fatal编程技术网
Fatal编程技术网
  • html/
  • Html 悬停父元素时子元素上的CSS转换

Html 悬停父元素时子元素上的CSS转换

html css

Html 悬停父元素时子元素上的CSS转换,html,css,css-transitions,css-transforms,Html,Css,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 {

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

.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);
}
在firefox中工作
或

适用于webkit浏览器

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);
}
为什么不能将两者结合起来：意思是为什么不能同时拥有这两个
transform:translate（0，-42px）和
顶部：-42px在同一规则内，即
.parent:hover>.child
。还是我没有正确理解你的问题？我应该亲眼看看。谢谢为什么设置
top
属性的动画如此痛苦？@yardarrat CSS位置本身就是一种痛苦。请注意，Transfoerm！=顶部

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