CSS 转换而不影响子元素? [英] CSS transform without affecting child elements?

问题描述

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

.server :hover {-moz-transform: 翻译 (0, -2px);-ms-transform: 翻译 (0, -2px);-o-transform: 翻译 (0, -2px);-webkit-transform: 翻译 (0, -2px);变换:翻译(0，-2px)；过渡持续时间:0.3s；过渡计时功能:缓入缓出；}

<div class="card m-2 p-1 text-center"><p>子元素</p>

解决方案

您可以使用 :not

指定

.server :hover :not(p) {-moz-transform: 翻译 (0, -2px);-ms-transform: 翻译 (0, -2px);-o-transform: 翻译 (0, -2px);-webkit-transform: 翻译 (0, -2px);变换:翻译(0，-2px)；过渡持续时间:0.3s；过渡计时功能:缓入缓出；}

<div class="card m-2 p-1 text-center"><p>子元素</p><div>子元素</div>

I am trying to have a card element move up on hover and then back down when it is no longer hovered. I am currently achieving this by using transform and translate in CSS. However, I have noticed that this can affect the children elements as well as the element that I want this animation affected by. Here is the HTML and CSS for the card that I have at the moment:

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

解决方案

You can specify by using :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>

这篇关于CSS 转换而不影响子元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！