我有以下内容:
<div id="parent">
<div id="child"></div>
</div>
#parent {
width: 400px;
height: 400px;
padding: 5px;
border: 1px solid #ccc;
position: relative;
}
#parent:hover #child {
transform: translateX(50px);
}
#child {
width: 100px;
height: 100px;
background-color: aquamarine;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
问题是当悬停在父级上时,子级会向下移动一点点。为什么我只指定了 translateX() 子进程就向下移动了?
最佳答案
行为是正确的,因为您正在覆盖 transform
参数。
你必须像这样组合它们
#parent:hover #child {
transform: translateX(50px) translateY(-50%);
}
关于css - CSS3 中 transform translateX 的奇怪行为?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40342352/