Change div with multiple images on hover - html

Question

I have div with multiple images that are static.
<div class="logos">
<img src="img/logos/imgo.png">
<img src="img/logos/imgo1.png">
<img src="img/logos/imgo2.png">
<img src="img/logos/imgo3.png">
</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

I guess you can do this with jQuery
<div class="logos">
<img data-hoverimg="img/logos/hoverimgo.png" src="img/logos/imgo.png">
<img data-hoverimg="img/logos/hoverimgo1.png" src="img/logos/imgo1.png">
<img data-hoverimg="img/logos/hoverimgo2.png" src="img/logos/imgo2.png">
<img data-hoverimg="img/logos/hoverimgo3.png" src="img/logos/imgo3.png">
</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);
});

Answer 2

You could create ids for your imgs :
<img id="myimg1" src="img/logos/imgo.png">
<img id="myimg2" src="img/logos/imgo1.png">
<img id="myimg3" src="img/logos/imgo2.png">
<img id="myimg4" src="img/logos/imgo3.png">
And for the CSS :
#myimg1:hover {
background-image: url('img/logos/another-image1.png');
}
#myimg2:hover {
background-image: url('img/logos/another-image2.png');
}