如何使样式为内联块的链接的背景不会出现在其以下链接兄弟姐妹的后面？
我有一些已缩放的链接，并且它们的背景在悬停时会随着 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 上都看到了这种行为。我不明白为什么它会这样工作，我希望使链接的背景表现正常。
跃然一笑浏览 47回答 1
1回答
-
慕无忌1623718
这是因为顺序的原因，在正常流程中，唯一存在的堆栈上下文是 ，<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>
随时随地看视频慕课网APP
相关分类
Html5