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 元素实际显示的是什么，你也可以使用伪 ::before 或 ::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 伪选择器（不带 space）直接添加到您要影响的元素。

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

CSS 在不影响子元素的情况下进行变换？

CSS transform without affecting child elements?

html

css

css-transforms