为 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>

为 onmouseover 添加淡入淡出效果

Adding a fade effect for onmouseover

javascript

transition

fade