我試圖讓卡片元素在懸停時向上移動，然后在不再懸停時向下移動。我目前正在通過使用 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>
3 回答
狐的傳說
TA貢獻1804條經驗 獲得超3個贊
由于子元素始終隨其父元素移動（同樣適用于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>
慕慕森
TA貢獻1856條經驗 獲得超17個贊
您可以通過使用指定: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>
12345678_0001
TA貢獻1802條經驗 獲得超5個贊
當您可能需要鏈選擇器時，您已經使用了復合選擇器。: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>
- 3 回答
- 0 關注
- 210 瀏覽
添加回答
舉報
0/150
提交
取消