4

Tenho o seguinte código em html, preciso que quanto ocorrer o evento hover, o link que está no data-hover vá para o src, e ao tirar o mouse, volte o link do src.

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

Até havia conseguido fazer algo parecido, porém quando eu passava o mouse a imagem trocava, e quando eu tirava, a imagem continuava, só trocava quando eu passava o mouse novamente (tinha que fazer 2 hovers para voltar para a img original).

Existe alguma maneira de fazer isto com css?

Se não, pode ser js mesmo.

0

4 Respostas 4

5

$(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">

3

A sua pergunta já foi respondida, mas isso que está querendo fazer dispensa o uso de Javascript. Normalmente são usados sprites para exibir imagens que possuem "estados" diferentes. E até para evitar realizar "n" requisições para baixar várias imagens.

Nessa resposta há um exemplo simples, aliás, a técnica é simples. Consiste em criar um arquivo com as imagens (preferencialmente) lado a lado e definir que essa imagem será o background de um elemento. Posteriormente o controle da alternância de imagens é realizado somente modificando o valor da propriedade background-position.

Por exemplo, considerando a imagem:

No caso de eu querer usar somente as imagens do Google Plus e Linkedin, poderia fazer assim:

.icon {
  background: url('https://i.sstatic.net/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>

Imagem utilizada no exemplo por Di Web.

3
  • Eu já vi algumas aplicações usando uma unica imagem que contém todos os icones. Nesse caso, eles usam essa mesma técnica ? Isso faz com que o navegador faça cache de uma unica imagem e quando for renderizar, torne o processo mais rápido ? Commented 6/01/2017 às 15:09
  • @PauloGustavo dê uma olhada nessa resposta. Commented 6/01/2017 às 15:16
  • 1
    Sim, depois que vi o link aheah, foi mal Commented 6/01/2017 às 15:26
2

É possível obter os eventos mouseover e mouseout e alterar o atributo src usando attr, algo como:

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

2

Essa seria uma solução, com jquery, usando a mesma função para trocar a imagem ao passar e retira o 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">

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .