Change div with multiple images on hover

Question

I have div with multiple images that are static.

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

What I want to achieve is when I hover on some image to be changed with another image. How can be done this? If it was just one image I know that I can make like this:

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

but with multiple i don't know.

Answer 1

You could create ids for your imgs :

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

And for the CSS :

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

Answer 2

I guess you can do this with 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>

and place the jQuery in ready function

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