我有一些已縮放的鏈接，并且它們的背景在懸停時會隨著 1 秒的過渡而改變。當懸停第一個鏈接時，它會縮放得如此之大，以致它懸停在其他鏈接上，并且其他鏈接在其下方可見。當鼠標懸停時，第二個鏈接不會出現在第一個鏈接下方，而是出現在第三個鏈接下方。第三個鏈接不會出現在任何其他鏈接下。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 上都看到了這種行為。我不明白為什么它會這樣工作，我希望使鏈接的背景表現正常。
1 回答
慕無忌1623718
TA貢獻1744條經驗 獲得超4個贊
這是因為順序的原因，在正常流程中，唯一存在的堆棧上下文是 ，<html>并且元素將被標記中緊隨其后的下一個元素覆蓋。
使用 z-index 會影響某些元素的渲染順序，但是 z-index 不會產生任何影響，因為 z-index 僅適用于定位元素。
定位元素：是位置值不是static的元素
我們可以使用，position:relative因為它的行為類似于靜態。
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 關注
- 142 瀏覽
添加回答
舉報
0/150
提交
取消