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

*Controller

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;
}

为onmouseover添加淡入淡出效果

1 个答案: