Hover in another image or background

Question

People is possible to give Hover in another example image

It’s not official but it’s like this:

<div class='blabla'>
<center><img class='bleble' src='imagem1.jpg'/></center>
<br/>
<a href='/'><img class='blibli' src='imagem2.jpg'/></a> - <a href='/'><img class='bloblo' src='imagem3.jpg'/></a>
<br/><br/>
</div>

When you mouse image 2 and 3, you change image 1 to a supposed image 4, remembering that image 1 may be in the background as well, as long as you change it when you mouse 2 or 3. In html or javascript wanted to know if you have how to do

Answer 1

You can do it like this:

$('.blibli,.bloblo').on('mouseover', function() {
  $('.bleble').prop('src', 'https://blognumbers.files.wordpress.com/2010/09/4.jpg');
});

$('.blibli,.bloblo').on('mouseout', function() {
  $('.bleble').prop('src', 'https://blognumbers.files.wordpress.com/2010/09/1.jpg');
});

img {
  width: 10%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='blabla'>
  <center><img class='bleble' src='https://blognumbers.files.wordpress.com/2010/09/1.jpg'/></center>
  <br/>
  <a href='/'><img class='blibli' src='https://blognumbers.files.wordpress.com/2010/09/2.jpg'/></a> - <a href='/'><img class='bloblo' src='https://blognumbers.files.wordpress.com/2010/09/3.jpg'/></a>
  <br/><br/>
</div>

• Multipleselector
• Mouseover
• Mouseout