Grab link on date and play on src from img on Hover

Question

I have the following html code, I need that when the event occurs, the link that is in the data-Hover go to src, and when taking the mouse, return the src link.

<img src="images/manada.jpg" data-hover="images/manada-hover.jpg" class="img-responsive">

I had even managed to do something similar, but when I passed the mouse the image changed, and when I took it, the image continued, only changed when I passed the mouse again (I had to make 2 hovers to return to the original image).

Is there any way to do this with css?

If not, it can be yourself.

Answer 1

$(document).ready(function() {

  $('.img-hover-out').on('mouseover', function() {
    var dataSrc = $(this).data('hover');
    $(this).attr('src', dataSrc);
  }).on('mouseout', function() {
    var dataSrc = $(this).data('out');
    $(this).attr('src', dataSrc);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" data-hover="https://placeholdit.imgix.net/~text?txtsize=33&txt=Outra&w=350&h=150" class="img-responsive img-hover-out" data-out="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">

Answer 2

Your question has already been answered, but this is what you want to do waiving the use of Javascript. Normally they are used sprites to display images that have different "states". And even to avoid performing "n" requests to download multiple images.

In that reply There’s a simple example, by the way, the technique is simple. It consists of creating a file with the images (preferably) side by side and define that this image will be the background of an element. Later the control of the change of images is carried out only by modifying the value of the property background-position.

For example, considering the image:

In case I want to use only Google Plus and Linkedin images, I could do so:

.icon {
  background: url('https://i.stack.imgur.com/0lq3l.png');
  display: inline-block;
  transition: background-position 400ms;
  height: 30px;
  width: 33px
}

.icon.gplus       { background-position: 533px 0   }
.icon.gplus:hover { background-position: 533px 95% }

.icon.linkedin       { background-position: 500px 0   }
.icon.linkedin:hover { background-position: 500px 95% }

<div class='icon gplus'></div>
<div class='icon linkedin'></div>

Image used in the example by Di Web.

Answer 3

It is possible to obtain the events mouseover and mouseout and change the attribute src using attr, something like:

var src = 'images/manada.jpg';
$( "img" ).mouseover(function() {
  $(this).attr("src", $(this).attr('data-hover'));
});

$( "img" ).mouseout(function() {
  $(this).attr("src", src);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="images/manada.jpg" data-hover="images/manada-hover.jpg" class="img-responsive">

Answer 4

This would be a solution, with jquery, using the same function to swap the image while passing and remove the mouse:

//executa a funçao ao passar o mouse por cima ou ao retirar o mouse de cima
$(".img-responsive").on("mouseover mouseout", function(){
// armazena o link da imagem atual	
var img= $(this).attr("src");
//armazena o link da imagem que vai ser trocada
var img2= $(this).attr("data-hover");
//inverte os links trocando a imagem
$(this).attr("src",img2);
$(this).attr("data-hover",img);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://kingofwallpapers.com/imagem/imagem-005.jpg" data-hover="https://desacordoonline.files.wordpress.com/2015/11/dory.jpg" class="img-responsive">