Question

我一直在尝试创建以下内容：显示图像，当鼠标悬停在图像上时，图像上会显示一个分数，该分数会逐渐淡入。我几乎就在那里，除了部分的淡化。

我的CSS：

.profile-image10 {
  opacity: 1;
}

.profile-image10:hover .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 510px;
  top: 8px;
  z-index: 2;
  background: transparent url('http://www.defilmkijker.com/wp-content/uploads/2018/01/overlayscore10.png') no-repeat;
  -webkit-transition: opacity 1s ease-in;
  -moz-transition: opacity 1s ease-in;
  -ms-transition: opacity 1s ease-in;
  -o-transition: opacity 1s ease-in;
  transition: opacity 1s ease-in;
  opacity: 0.1;
}

<div class="profile-image10">
  <a href="#"><img src="https://www.w3schools.com/howto/img_fjords.jpg" /></a>
  <span class="overlay"></span>
</div>

我创造了这个小提琴： https://jsfiddle.net/1wusom4m/

正如你所看到的那样，它在悬停时会逐渐淡出，这与我想要的相反。所以当然不透明度设置错误，但如果我在.profile-image10中将其设置为较低值，它也会影响原始图像。我对此很陌生，所以我已经做了很多努力才能做到这一点，但我现在已经被困住了。那么当我将鼠标悬停在图像上时，如何让它在分数中淡入？或者我接近这一切都错了？

Answer 1

三件事。

不要在:hover状态下依赖覆盖的所有样式属性。只有您想要在图片:hover上更改的内容。
始终为原始状态定义transition属性。您可以通过在:hover状态下另外指定来更改反向转换。
您div是一个块级元素，默认情况下会占用尽可能多的水平空间。将:hover放在div上会导致淡入淡出效果被触发，即使您将鼠标悬停在图片右侧（可能不需要）。

.profile-image10 .overlay{
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 585px;
  top: 8px;
  z-index: 2;
  background: transparent url('http://www.defilmkijker.com/wp-content/uploads/2018/01/overlayscore10.png') no-repeat;
  -webkit-transition: opacity 1s ease-in;
  -moz-transition: opacity 1s ease-in;
  -ms-transition: opacity 1s ease-in;
  -o-transition: opacity 1s ease-in;
  transition: opacity 1s ease-in;
}

.profile-image10 a:hover + .overlay {
  opacity: 1;
}

<div class="profile-image10">
  <a href="#"><img src="http://www.defilmkijker.com/wp-content/uploads/2018/01/Recensie-Three-Billboards-Outside-Ebbing-Missouri.jpg" class="alignnone size-full wp-image-19857 round" /></a>
  <span class="overlay"></span>
</div>

小提琴：https://jsfiddle.net/1wusom4m/3/

悬停时使用淡入淡出的CSS图像叠加

1 个答案: