我試圖讓卡片元素在懸停時(shí)向上移動(dòng)，然后在不再懸停時(shí)向下移動(dòng)。我目前正在通過使用 CSS 來實(shí)現(xiàn)這transform一點(diǎn)translate。但是，我注意到這可能會(huì)影響子元素以及我希望此動(dòng)畫受影響的元素。這是我目前擁有的卡片的 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貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超3個(gè)贊
由于子元素始終隨其父元素移動(dòng)（同樣適用于opacity），因此您可以對(duì)所有子元素設(shè)置相反的變換。
我在 上添加了紅色背景，card并將> *所有子項(xiàng)設(shè)置為具有相反的變換。
.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元素實(shí)際顯示什么，您還可以使用偽::beforeor::after并將轉(zhuǎn)換分配給它：
.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貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超17個(gè)贊
您可以通過使用指定: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貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊
當(dāng)您可能需要鏈選擇器時(shí)，您已經(jīng)使用了復(fù)合選擇器。: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 關(guān)注
- 204 瀏覽
添加回答
舉報(bào)
0/150
提交
取消