我有一些已縮放的鏈接，并且它們的背景在懸停時(shí)會(huì)隨著 1 秒的過渡而改變。當(dāng)懸停第一個(gè)鏈接時(shí)，它會(huì)縮放得如此之大，以致它懸停在其他鏈接上，并且其他鏈接在其下方可見。當(dāng)鼠標(biāo)懸停時(shí)，第二個(gè)鏈接不會(huì)出現(xiàn)在第一個(gè)鏈接下方，而是出現(xiàn)在第三個(gè)鏈接下方。第三個(gè)鏈接不會(huì)出現(xiàn)在任何其他鏈接下。a { color: lightblue; transform: scale(1); transition: all 1s; display: inline-block; background-color: transparent;}a:hover { transform: scale(5); background-color: yellow;}<div class="page-footer"> <a href="">ABCD</a> / <a href="">EFGH</a> / <a href="">IJKL</a></div>我在 Chrome 和 Firefox 上都看到了這種行為。我不明白為什么它會(huì)這樣工作，我希望使鏈接的背景表現(xiàn)正常。
1 回答
慕無忌1623718
TA貢獻(xiàn)1744條經(jīng)驗(yàn) 獲得超4個(gè)贊
這是因?yàn)轫樞虻脑颍谡Ａ鞒讨?，唯一存在的堆棧上下文?，<html>并且元素將被標(biāo)記中緊隨其后的下一個(gè)元素覆蓋。
使用 z-index 會(huì)影響某些元素的渲染順序，但是 z-index 不會(huì)產(chǎn)生任何影響，因?yàn)?z-index 僅適用于定位元素。
定位元素：是位置值不是static的元素
我們可以使用，position:relative因?yàn)樗男袨轭愃朴陟o態(tài)。
a {
color: lightblue;
transform: scale(1);
transition: all 1s;
display: inline-block;
background-color: transparent;
z-index: 1;
}
a:hover {
transform: scale(5);
background-color: yellow;
position: relative;
z-index: 2; /* higher than other <a> */
}
/* Just to center Not needed */
div {
display: table;
margin: 5em auto;
}
<div class="page-footer">
<a href="">ABCD</a> /
<a href="">EFGH</a> /
<a href="">IJKL</a>
</div>
- 1 回答
- 0 關(guān)注
- 135 瀏覽
添加回答
舉報(bào)
0/150
提交
取消