我有一些已缩放的链接，并且它们的背景在悬停时会随着 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 关注
- 94 浏览
添加回答
举报
0/150
提交
取消