使用鼠标悬停功能在同一位置隐藏和显示

Question

我在使用鼠标悬停功能隐藏和显示两张图片的同一位置时遇到问题。比如我悬停在图片上，第二张图片会停留在第一张图片的位置，大小和第一张一样。

下面是我的示例代码：

<style>
.preview-image {
  background-size: 0 0;
  width: 100vw;
}
.nopadding {
  padding: 0!important;
} 
.container:hover .preview-image {
  opacity: 1;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100px;
}
.container:hover .txt-container {
  opacity: 0;
}
.txt-container {
  opacity: 1;
  font-weight: bold;
  color: black;
}
.btn {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
</style>
 <ul class="nopadding">
<div class="container">
    <li class="preview-image" style="background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTadW0C0MkeampnVW-_sT7bMOemD3roUI5x-w&usqp=CAU);">
      <div class="txt-container">
          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQXV2n5aZGMr6SoY-thS3xR6bPchCnUu23SiA&usqp=CAU" />
      </div>
    </li>
  </div>
</ul>

例如-如果没有悬停，第一张图片将显示在页面上：

例如 - 如果悬停在第一张图片上，第二张图片将与第一页重叠，并且大小与页面上的第一张图片保持相同：

希望有人能指导我如何解决它。谢谢

Answer 1

<html lang="en">

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    .card {
      width: 227px;
      height: 235px;
      background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQXV2n5aZGMr6SoY-thS3xR6bPchCnUu23SiA&usqp=CAU") no-repeat;
      margin: 50px;
    }
    
    .card:hover {
      background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTadW0C0MkeampnVW-_sT7bMOemD3roUI5x-w&usqp=CAU") no-repeat;
    }
  </style>
</head>

<body>
  <div class="card"></div>
</body>

</html>

Answer 2

尝试下面的方法来控制两个图像的 display 属性。

我还把 txt-container class 变成了 inline-block 元素，使 div 适合图像。

.nopadding {
  padding: 0 !important;
}
.txt-container .image-one {
  display: none;
}
.txt-container .image-two {
  display: block;
}
.txt-container:hover .image-one {
  display: block;
}
.txt-container:hover .image-two {
  display: none;
}

.txt-container {
  font-weight: bold;
  color: black;
  display: inline-block;
}

.btn {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

<ul class="nopadding">
  <div class="container">
    <li class="preview-image">
      <div class="txt-container">
        <img
          class="image-one"
          src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTadW0C0MkeampnVW-_sT7bMOemD3roUI5x-w&usqp=CAU" alt="">
        <img
          class="image-two"
          src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQXV2n5aZGMr6SoY-thS3xR6bPchCnUu23SiA&usqp=CAU" />
      </div>
    </li>
  </div>
</ul>

使用鼠标悬停功能在同一位置隐藏和显示

Using mouse hover function to hide and show in the same position

html

css

mousehover