时间戳

首页 > 解决方案 > 使用鼠标悬停功能隐藏和显示在同一位置

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

问题描述

我在执行鼠标悬停功能以隐藏和显示两张图片的同一位置时遇到问题。例如，如果我将鼠标悬停在图片上，第二张图片将停留在第一张图片的位置，并且大小与第一张图片相同。

以下是我的示例编码：

<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>

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

图像1

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

img2

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

标签： htmlcssmousehover

解决方案

<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>

推荐阅读