Html CSS转换而不影响子元素？

我试图让一个卡片元素在悬停时向上移动，当它不再悬停时再向下移动。我目前通过在CSS中使用

transform

和

translate

来实现这一点。但是，我注意到，这会影响子元素以及我希望此动画受其影响的元素。以下是我目前拥有的卡片的HTML和CSS：

.server:悬停{
-moz变换：平移（0，-2px）；
-ms变换：平移（0，-2px）；
-o变换：平移（0，-2px）；
-webkit转换：转换（0，-2px）；
变换：平移（0，-2px）；
过渡时间：0.3s；
过渡定时功能：易进易出；
}

子元素

由于子元素总是与其父元素一起移动（这同样适用于

不透明度

），因此可以在所有子元素上设置相反的变换

我在

卡片上添加了一个红色背景

，并将

*

所有子项设置为具有相反的变换

.server:悬停{
-moz变换：平移（0，-2px）；
-ms变换：平移（0，-2px）；
-o变换：平移（0，-2px）；
-webkit转换：转换（0，-2px）；
变换：平移（0，-2px）；
过渡时间：0.3s；
过渡定时功能：易进易出；
}
.server:悬停>*{
变换：平移（0，2px）；
过渡时间：0.3s；
过渡定时功能：易进易出；
}
.卡片{
背景：红色；
}

子元素

子元素

子元素

子元素

子元素

子元素

子元素

由于子元素总是与其父元素一起移动（这同样适用于

不透明度

），因此可以在所有子元素上设置相反的变换

我在

卡片上添加了一个红色背景

，并将

*

所有子项设置为具有相反的变换

.server:悬停{
-moz变换：平移（0，-2px）；
-ms变换：平移（0，-2px）；
-o变换：平移（0，-2px）；
-webkit转换：转换（0，-2px）；
变换：平移（0，-2px）；
过渡时间：0.3s；
过渡定时功能：易进易出；
}
.server:悬停>*{
变换：平移（0，2px）；
过渡时间：0.3s；
过渡定时功能：易进易出；
}
.卡片{
背景：红色；
}

子元素

子元素

子元素

子元素

子元素

子元素

子元素

您可以使用

：not

.server:hover:not（p）{
-moz变换：平移（0，-2px）；
-ms变换：平移（0，-2px）；
-o变换：平移（0，-2px）；
-webkit转换：转换（0，-2px）；
变换：平移（0，-2px）；
过渡时间：0.3s；
过渡定时功能：易进易出；
}

子元素

子元素

您可以使用

：not

.server:hover:not（p）{
-moz变换：平移（0，-2px）；
-ms变换：平移（0，-2px）；
-o变换：平移（0，-2px）；
-webkit转换：转换（0，-2px）；
变换：平移（0，-2px）；
过渡时间：0.3s；
过渡定时功能：易进易出；
}

子元素

子元素

我应该指定我在问题中使用的HTML是示例，而卡片中的代码更复杂。如果有多个元素，我是否只需要添加带有逗号的元素<代码>例如（p，div，img）@你明白了<代码>：not（p，div，img）你可以更一般地使用通配符

：not（*）

另外，请用你发布的所有评论更新你的答案-让未来的访问者更容易-这样他们就不必通过评论寻找最终答案。我应该指定我在问题中使用的HTML是示例，而且卡里面的代码更复杂。如果有多个元素，我是否只需要添加带有逗号的元素<代码>例如（p，div，img）@你明白了<代码>：not（p，div，img）你可以更一般地使用通配符

：not（*）

另外，请用你发布的所有评论更新你的答案-让未来的访问者更容易-这样他们就不必通过评论寻找最终答案。尽管这很可能奏效，Mech提供的解决方案似乎更加优雅和干净。很抱歉别难过！这些解决方案仍然有效，但Mech的

：not

也是一个合适的解决方案。尽管这很可能奏效，但Mech提供的解决方案似乎更优雅、更干净。很抱歉别难过！这些解决方案仍然有效，但Mech的

：not

也是合适的解决方案。