Question

我目前正在使用css来更改我的图像源，但它非常突然。如何使用css或jquery在鼠标输入和鼠标输出时使图像平滑变化？

当前代码：

＆＃13;

    .containerBox1:hover{
	content: url('http://example.com/prouser-newimage.png');
    }
    .containerBox2:hover{
	content: url('http://example.com/domuser-newimage.png');
    }
    .containerBox3:hover{
	content: url('http://example.com/aboutus-newimage.png');
    }

＆＃13;

<a href="http://example.com/prouser">
    <div class="containerBox1">
    <img src="http://example.com/prouser.png"/>
    </div>
    </a>
    <a href="http://example.com/domuser/">
    <div class="containerBox2">
    <img src="http://example.com/domuser.png"/>
    </div>
    </a>
    <a href="http://example.com/aboutus">
    <div class="containerBox3">
    <img src="http://example.com/aboutus.png"/>
    </div>
    </a>

＆＃13;

谢谢你， d

Answer 1

实际您不应在此处使用content，因为transition无法使用content而非content使用background-image然后使用transition，你可以谷歌找到你的答案更快，但我回答纠正你的错误，否则在谷歌上发现transition是如此容易。

.containerBox1 {
    transition: .3s background ease;
    background: url(https://googlechrome.github.io/samples/picture-element/images/butterfly.jpg);
    width: 200px;
    height: 200px;
    background-size: cover;
}

.containerBox1:hover {
    background: url(https://media.winnipegfreepress.com/images/400*384/3229268.jpg);
    background-size: cover;
}

<a href="http://example.com/prouser">
  <div class="containerBox1">
  </div>
</a>

在悬停时平滑更改图像源

1 个答案: