鼠标悬停图像显示推送文本，尽管 z-索引

我已经设置了我的代码，所以当你将鼠标悬停在H2上时，会显示一个图像。假设，由于文本为 z-index：2，图像为 z-index：1，因此 H2 文本应保持固定。但是，鼠标悬停时，文本仍在向下移动，以便为图像腾出空间。

我需要文本保持固定在同一位置，背景图像只是在悬停时出现，而无需轻推 h2。

您可以在此处查看测试： http://www.rorywolfseydel.com/test3-2

h2 {
line-height: 68px !important;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 80px;
font-weight: 0 !important;
color: #ffffff;
z-index: 12;
}
.artisthover {
display: none
}
h2.two:hover img {
display: block;
z-index: -1;
position: relative;
margin-top: -200px;
margin-left: -250px
}
h2.two a {
color: #ffffff;
}
h2.three:hover img {
display: block;
z-index: -1;
position: relative;
margin-top: -200px;
margin-right: -250px
}
h2.three a {
color: #ffffff;
}

<center>
<h2 class="two">
<a href="http://lawnyavawnya.com/2018/artists/absolutelyfree">ABSOLUTELY FREE</a>
<img src="http://lawnyavawnya.com/2018/2019artists/absolutelyfree.jpg" class="artisthover" width="500px">
</h2>
</center>
<center>
<h2 class="three">
<a href="http://lawnyavawnya.com/2018/artists/badgeepoqueensemble">BADGE EPOQUE ensemble</a>
<img src="http://lawnyavawnya.com/2018/2019artists/badgeepoque.jpg" class="artisthover" width="500px">
</h2>
</center>

假设，由于文本为 z-index：2，图像为 z-index：1，因此 H2 文本应保持固定。这是对z-index如何工作的不正确假设。

z-index元素的堆叠顺序，具有更高或更低的z-index并不意味着具有较高z-index的元素将自动出现在彼此之上。为此，您需要使用position。

例如，两个具有不同z-index值但位置相对的元素相对于彼此定位 - 这意味着即使其中一个元素具有更高或更低的 z 指数，这些元素也会相互影响彼此的定位。

下面是一个简单的示例：

.top {
height: 200px;
background: purple;
position: relative;
z-index: 1;
box-shadow: 0px 0px 20px rgba(0, 0, 0, .5);
}
.top:hover {
z-index: 3;
}
.bottom {
height: 300px;
background: yellow;
position: relative;
z-index: 2;
}

<div class="top">
</div>
<div class="bottom">
</div>

如您所见，元素具有不同的z-index值，但位置relative。如果将鼠标悬停在顶部div，您可以看到box-shadow与底部重叠div，但元素的位置在顶部，右侧，底部，左侧方面没有变化 - 只有堆叠顺序。

现在来看您的具体示例：

在这里，我们使用position: absolute将img元素从文档流中删除，从而使您能够利用z-index。由于图像现在已退出文档流，因此它不再影响其周围的任何其他元素。

下面的代码片段是一个非常简单的演示，其中position在图像上进行了更改。它可能看起来不像你想要的那样，但它是一个起点。

其他几件事：

<center>标记已过时。您应该改用h2上的text-align: center。
根据您希望它的外观的最终目标，我会考虑将图像移出h2标签并将h2和img包装在包含元素中(例如div(。这将允许更好地控制图像在可见后的位置。

h2 {
line-height: 68px !important;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 80px;
font-weight: 0 !important;
color: #000;
z-index: 12;
text-align: center;
}
.artisthover {
display: none
}
h2.two:hover img {
display: block;
z-index: -1;
position: absolute;
margin-top: -200px;
margin-left: -250px
}
h2.two a {
color: #000;
}
h2.three:hover img {
display: block;
z-index: -1;
position: absolute;
margin-top: -200px;
margin-right: -250px
}
h2.three a {
color: #000;
}

<h2 class="two">
<a href="http://lawnyavawnya.com/2018/artists/absolutelyfree">ABSOLUTELY FREE</a>
<img src="http://lawnyavawnya.com/2018/2019artists/absolutelyfree.jpg" class="artisthover" width="">
</h2>
<h2 class="three">
<a href="http://lawnyavawnya.com/2018/artists/badgeepoqueensemble">BADGE EPOQUE ensemble</a>
<img src="http://lawnyavawnya.com/2018/2019artists/badgeepoque.jpg" class="artisthover" width="500px">
</h2>

<!DOCTYPE html>
<html>
<head>
<style>
.artisthover {
display: none
}
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
h2.two:hover img {
display:inline ;
}
h2.three:hover img {
display:inline ;
}
</style>
</head>
<body>
<center>
<h2 class="two">
<a href="http://lawnyavawnya.com/2018/artists/absolutelyfree">ABSOLUTELY FREE</a>
<img src="http://lawnyavawnya.com/2018/2019artists/absolutelyfree.jpg" class="artisthover" width="500px">
</h2>
</center>
<center>
<h2 class="three">
<a href="http://lawnyavawnya.com/2018/artists/badgeepoqueensemble">BADGE EPOQUE ensemble</a>
<img src="http://lawnyavawnya.com/2018/2019artists/badgeepoque.jpg" class="artisthover" width="500px">
</h2>
</center>
</body>
</html>

好吧，要在图像上设置z索引，位置必须是绝对的，以使图像保持不变，并且外部元素的显示是内联的。

相关内容

最新更新

热门标签：