时间戳

首页 > 解决方案 > 尽管z-Index，鼠标悬停图像显示推送文本

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

问题描述

我已经设置了代码，因此当您将鼠标悬停在 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>

标签： htmlcssz-index

解决方案

<!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-index，位置必须是绝对的，图像才能保持不变，并且外部元素的显示是内联的......

推荐阅读