如何使样式为嵌入式块的链接的背景不出现在其后面的链接兄弟姐妹后面？

问题描述 投票：0回答：1

我有一些链接已缩放，并且其背景随着悬停时的1s转换而改变。当悬停第一个链接时，它的缩放比例太大，以至于它悬停了其他链接，并且其他链接在其下方可见。悬停时，第二个链接不会出现在第一个链接下，而是出现在第三个链接下。第三个链接未出现在任何其他链接下方。

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上都看到了这种现象。我不明白为什么这样做会如此，我希望使链接的背景正常运行。

谢谢。

html css css-transitions anchor css-transforms
1个回答
0
投票

由于顺序，在正常流程中，唯一的堆叠上下文是<html>，并且标记中位于其后的下一个元素将覆盖该元素。

使用z-index，某些元素的呈现顺序会受到影响，但是z-index不会有任何效果，因为z-index仅适用于定位的元素。

定位元素：是位置值不是静态的元素

我们可以使用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> */
}
<div class="page-footer">
  <a href="">ABCD</a> /
  <a href="">EFGH</a> /
  <a href="">IJKL</a>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.