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 {

  -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;

}

.server :hover > * {

  transform: translate(0, 2px);

  transition-duration: 0.3s;

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

}

.card {

  background: red;

}

<div class="server">

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

    <p>Child element</p>

  </div>

  

  

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

    <p>Child element</p>

    <p>Child element</p>

    <p>Child element</p>

    <p>Child element</p>

    <p>Child element</p>

    <p>Child element</p>

  </div>

  

  

</div>

由于我不确定您的card元素实际显示什么，您还可以使用伪::beforeor::after并将转换分配给它：

.server :hover::after {

  transform: translate(0, -2px);

  transition-duration: 0.3s;

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

}

.card {

  position: relative;

  z-index: 1;

}

.card::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  background: red;

  width: 100%;

  height: 100%;

  z-index: -1;

}

.card>* {

  z-index: 5;

}

<div class="server">

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

    <p>Child element</p>

    <p>Child element</p>

    <p>Child element</p>

    <p>Child element</p>

    <p>Child element</p>

  </div>

</div>

Answer 2

您可以通过使用指定:not

.server :hover :not(p) {

  -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>Child element</div>

  </div>

</div>

Answer 3

当您可能需要链选择器时，您已经使用了复合选择器。:hover只需将伪选择器（不带空格）直接添加到您想要影响的元素即可。

.card {

  /* transitions are needed when hover state ends, so set up rules here */

  transform: translate(0, 0);

  transition-property: transform;

  transition-duration: 0.3s;

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

}

.card:hover { /* note: no space */

  transform: translate(0, -2px);

}

<div class="server">

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

    <p>Child element</p>

  </div>

</div>