悬停状态下背景图像的转换

Question

当我把鼠标放在上面的时候，背景图像马上就会显示出来。我想表现出一个渐进式的妥协。我怎么才能解决这个问题？

​

.category__mid {
  min-height: 260px;
  width: 200px;
  border: 2px solid #000;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(255, 255, 255, 1);
  background-blend-mode: lighten;
  transition: all 0.9s ease;
}

.category__mid:hover {
  background-color: rgba(255, 255, 255, 0);
  background-blend-mode: normal;
}

<div class="category__mid" style="background-image: url('https://i.postimg.cc/NG159gHv/pexels-kampus-production-8439682.jpg')">
  <h3>I want to show transition on hover. NOT when the user leaves</h3>
</div>

​

Answer 1

将css更改为

.category__mid {
  min-height: 260px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(255,255,255,1);
  background-blend-mode: lighten;
}
.category__mid:hover {
  background-color: rgba(255,255,255,0);
  transition: all 0.9s ease ; 
}

Answer 2

将css更改为；

.category__mid {
      min-height: 260px;
      width: 200px;
      border: 2px solid #000;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      background-color: rgba(255,255,255,1);
      background-blend-mode: lighten;
      transition: all 0.9s ease; 
    }
    .category__mid:hover {
      animation: fade-in 0.9s ease;
      background-color: rgba(255,255,255,0);
    }
    
  @keyframes fade-in {
    0% {
      background-blend-mode: lighten;
    }
    100% {
      background-blend-mode: normal;
    }
  }

不幸的是，您不能转换一个div的背景图像。

但你可以用动画。