CSS 变换不影响子元素？

Question

我试图让卡片元素在悬停时向上移动，然后在不再悬停时向下移动。我目前正在通过使用 CSS 来实现这transform一点translate。但是，我注意到这可能会影响子元素以及我希望此动画受影响的元素。这是我目前拥有的卡片的 HTML 和 CSS：

.server :hover {

  -moz-transform: translate(0, -2px);

  -ms-transform: translate(0, -2px);

  -o-transform: translate(0, -2px);

  -webkit-transform: translate(0, -2px);

  transform: translate(0, -2px);

  transition-duration: 0.3s;

  transition-timing-function: ease-in-out;

}

<div class="server">

  <div class="card m-2 p-1 text-center">

    <p>Child element</p>

  </div>

</div>

Answer 1

由于子元素始终随其父元素移动（同样适用于opacity），因此您可以对所有子元素设置相反的变换。我在 上添加了红色背景，card并将> *所有子项设置为具有相反的变换。.server :hover {&nbsp; -moz-transform: translate(0, -2px);&nbsp; -ms-transform: translate(0, -2px);&nbsp; -o-transform: translate(0, -2px);&nbsp; -webkit-transform: translate(0, -2px);&nbsp; transform: translate(0, -2px);&nbsp; transition-duration: 0.3s;&nbsp; transition-timing-function: ease-in-out;}.server :hover > * {&nbsp; transform: translate(0, 2px);&nbsp; transition-duration: 0.3s;&nbsp; transition-timing-function: ease-in-out;}.card {&nbsp; background: red;}<div class="server">&nbsp; <div class="card m-2 p-1 text-center">&nbsp; &nbsp; <p>Child element</p>&nbsp; </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div class="card m-2 p-1 text-center">&nbsp; &nbsp; <p>Child element</p>&nbsp; &nbsp; <p>Child element</p>&nbsp; &nbsp; <p>Child element</p>&nbsp; &nbsp; <p>Child element</p>&nbsp; &nbsp; <p>Child element</p>&nbsp; &nbsp; <p>Child element</p>&nbsp; </div>&nbsp;&nbsp;&nbsp;&nbsp;</div>由于我不确定您的card元素实际显示什么，您还可以使用伪::beforeor::after并将转换分配给它：.server :hover::after {&nbsp; transform: translate(0, -2px);&nbsp; transition-duration: 0.3s;&nbsp; transition-timing-function: ease-in-out;}.card {&nbsp; position: relative;&nbsp; z-index: 1;}.card::after {&nbsp; content: '';&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;&nbsp; background: red;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; z-index: -1;}.card>* {&nbsp; z-index: 5;}<div class="server">&nbsp; <div class="card m-2 p-1 text-center">&nbsp; &nbsp; <p>Child element</p>&nbsp; &nbsp; <p>Child element</p>&nbsp; &nbsp; <p>Child element</p>&nbsp; &nbsp; <p>Child element</p>&nbsp; &nbsp; <p>Child element</p>&nbsp; </div></div>

Answer 2

您可以通过使用指定:not.server :hover :not(p) {&nbsp; -moz-transform: translate(0, -2px);&nbsp; -ms-transform: translate(0, -2px);&nbsp; -o-transform: translate(0, -2px);&nbsp; -webkit-transform: translate(0, -2px);&nbsp; transform: translate(0, -2px);&nbsp; transition-duration: 0.3s;&nbsp; transition-timing-function: ease-in-out;}<div class="server">&nbsp; <div class="card m-2 p-1 text-center">&nbsp; &nbsp; <p>Child element</p>&nbsp; &nbsp; <div>Child element</div>&nbsp; </div></div>

Answer 3

当您可能需要链选择器时，您已经使用了复合选择器。:hover只需将伪选择器（不带空格）直接添加到您想要影响的元素即可。.card {&nbsp; /* transitions are needed when hover state ends, so set up rules here */&nbsp; transform: translate(0, 0);&nbsp; transition-property: transform;&nbsp; transition-duration: 0.3s;&nbsp; transition-timing-function: ease-in-out;}.card:hover { /* note: no space */&nbsp; transform: translate(0, -2px);}<div class="server">&nbsp; <div class="card m-2 p-1 text-center">&nbsp; &nbsp; <p>Child element</p>&nbsp; </div></div>