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

你可以为你的imgs创建id：

<a href="#"><img id="myimg1" src="img/logos/imgo.png"></a>
<a href="#"><img id="myimg2" src="img/logos/imgo1.png"></a>
<a href="#"><img id="myimg3" src="img/logos/imgo2.png"></a>
<a href="#"><img id="myimg4" src="img/logos/imgo3.png"></a>

对于CSS：

#myimg1:hover {
background-image: url('img/logos/another-image1.png');
}
#myimg2:hover {
background-image: url('img/logos/another-image2.png');
}

Answer 2

我猜你可以用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);
});

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

2 个答案: