为onmouseover添加淡入淡出效果

Question

我认为应该有一个简单的解决方案，我只是不知道它可能是什么。

这是我的代码：

<a href="/online-dating">
<img src="https://static1.squarespace.com/static/51d45e1ce4b0ed5a1e73808b/t/5c6faba9971a18628dc5bc4a/1550822313198/1a_online-dating%402x.jpg">

onmouseover="this.src='https://static1.squarespace.com/static/51d45e1ce4b0ed5a1e73808b/t/5c6fabdeeb39313575ca52e2/1550822366487/1b_online-dating%402x.jpg'"

onmouseout="this.src='https://static1.squarespace.com/static/51d45e1ce4b0ed5a1e73808b/t/5c6faba9971a18628dc5bc4a/1550822313198/1a_online-dating%402x.jpg'"></a>

代码很棒！我只是想在鼠标悬停发生时添加一个很好的淡入淡出过渡。

有任何想法吗？

我尝试过CSS3替代方案，但该代码的问题在于它没有响应，因为您必须定义高度或宽度。这个解决方案是完美的，因为我们可以找出这个淡入淡出代码。

在此先感谢您的帮助！

Answer 1

div{
  width: 100%;
  background-image: url(https://static1.squarespace.com/static/51d45e1ce4b0ed5a1e73808b/t/5c6faba9971a18628dc5bc4a/1550822313198/1a_online-dating%402x.jpg);
  background-color: #fff;
  background-blend-mode: multiply;
  transition: background-color .4s;
  -webkit-transition: background-color .4s;
  -moz-transition: background-color .4s;
  -o-transition: background-color .4s;
  background-size: cover;
}

div:hover{
  background-color: red;
}

div img{
  width: 100%;
  opacity: 0;
  display: block;
}

<div>
  <img src="https://static1.squarespace.com/static/51d45e1ce4b0ed5a1e73808b/t/5c6faba9971a18628dc5bc4a/1550822313198/1a_online-dating%402x.jpg"/>
</div>