平滑地改变图像来源悬停

Question

我目前使用CSS来改变我的图像源，但它是非常突然的。如何使用css或jquery使鼠标在图像上平滑地变化并将鼠标移出？

当前代码：

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

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

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