Question

我正在尝试将悬停效果添加到图像以进行放大和缩小。但是即时工作出缩小效果，而无需将鼠标指针移到图像上。

.container {
  overflow: hidden;
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
  background-size: cover;
  background-position: center;
  transition: all 0.5s ease;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: black;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  opacity: 0.5;
}

.container:hover .overlay {
  height: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.image:hover {
  transform: scale(1.5);
  transition: .5s ease;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <h2>Slide in Overlay from the Bottom</h2>
  <p>Hover over the image to see the effect.</p>
  <div class="container">
    <img src="https://www.activeconnections.org/wp-content/uploads/avatar-1.png" alt="Avatar" class="image">
    <div class="overlay">
      <div class="text">Hello World</div>
    </div>
  </div>
</body>

</html>

实际上，我想为图像添加悬停效果，当鼠标指针出现在图像上时，它将平滑放大，而当鼠标指针移到图像上时，则会缩小图像。

Answer 1

当叠加层到达您的指针时，它会缩小。当叠加层到达您的指针时，实际上是叠加层会获得悬停效果，而不再是图像。

您可以通过将.pointer-events: none添加到.container:hover .overlay CSS中来避免这种情况，如下所示：

.container:hover .overlay {
  height: 100%;
  pointer-events: none;
}

Answer 2

据我了解，您希望在鼠标悬停在卡上时进行放大，并在鼠标从卡中移出后立即进行缩小。如果是这种情况，下面的代码段应该可以解决此问题：

.container {
  overflow: hidden;
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
  background-size: cover;
  background-position: center;
  transition: all 0.5s ease;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: black;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  opacity: 0.5;
}

.container:hover .overlay {
  height: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .image {
  transform: scale(1.5);
  transition: .5s ease;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <h2>Slide in Overlay from the Bottom</h2>
  <p>Hover over the image to see the effect.</p>
  <div class="container">
    <img src="https://www.activeconnections.org/wp-content/uploads/avatar-1.png" alt="Avatar" class="image">
    <div class="overlay">
      <div class="text">Hello World</div>
    </div>
  </div>
</body>

</html>

问题在于您对:hover的{{1}}做出了反应，并且由于存在覆盖层，一旦覆盖层遮盖了图像，css引擎就会删除{{1 }}。将.image的目标更改为:hover可以确保即使覆盖物遮挡了图像，该目标也将存在。

悬停放大和缩小背景无法正常工作

2 个答案: