html - 悬停时使用多个图像更改 div

Question

我有一个包含多个静态图像的 div。

<div class="logos">
   <a href="#"><img src="img/logos/imgo.png"></a>
   <a href="#"><img src="img/logos/imgo1.png"></a>
   <a href="#"><img src="img/logos/imgo2.png"></a>
   <a href="#"><img src="img/logos/imgo3.png"></a>
</div>

我想要实现的是当我将鼠标悬停在要用另一张图片更改的图片上时。如何做到这一点？如果它只是一张图片，我知道我可以像这样制作:

.logos:hover {
    background-image: url('img/logos/another-image.png');
}

但有多个我不知道。

Answer 1

我猜你可以用 jQuery 做到这一点

<div class="logos">
    <a href="#"><img data-hoverimg="img/logos/hoverimgo.png" src="img/logos/imgo.png"></a>
    <a href="#"><img data-hoverimg="img/logos/hoverimgo1.png" src="img/logos/imgo1.png"></a>
    <a href="#"><img data-hoverimg="img/logos/hoverimgo2.png" src="img/logos/imgo2.png"></a>
    <a href="#"><img data-hoverimg="img/logos/hoverimgo3.png" src="img/logos/imgo3.png"></a>
</div>

并将 jQuery 放在就绪函数中

jQuery('.logos img').hover(function(){
    var static_src = jQuery(this).attr('src');
    jQuery(this).attr('src', jQuery(this).data('hoverimg'));
    jQuery(this).data('hoverImg', static_src);
}, function(){
    var static_src = jQuery(this).attr('src');
    jQuery(this).attr('src', jQuery(this).data('hoverimg'));
    jQuery(this).data('hoverImg', static_src);
});