Question

当我将鼠标悬停在网页上时，我正试图让我的网页上的图片显示不同的颜色。相反，发生的事情是图像具有这种透明色，当我将鼠标悬停在图像上时，它会显示原始图像。

请有人帮忙解决这个问题：

.service-style-1 .service-perview figcaption {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  -khtml-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -khtml-transition: all 0.2s linear;
  transition: all 0.2s linear;
  top: 0;
  right: 0;
  z-index: 1;
  border: 104px solid rgba(255, 109, 132, 0.5);
}

.service-style-1:hover .service-perview figcaption {
  border-width: 8px;
}

html：

<div class="row">
  <div class="carousel-services carousel-col-3 carousel">
    <div class="service-wrapper carousel-item">
      <div class="service service-style-1">
        <h3 class="service-title"><a href="single-product.html">Product</a></h3>
        <figure class="service-perview">
          <img src="images1.jpg" alt="Cakes">
          <figcaption></figcaption>
        </figure>
        <p class="service-description">Product1</p>
      </div>
      <!-- end of service -->
    </div>
    <!-- end of service wrappper -->
  </div>
</div>

Answer 1

我通过将边框设置为8px然后悬停使其成为104px来修复此问题

将鼠标悬停在鼠标上，而不是在鼠标移出时显示转换

1 个答案: