3

Estou tentando fazer este menu animado (https://minecraft.net/pt-br/).

Gifs para teste (pegar o ):

Estado hover - inserir a descrição da imagem aqui

Estado normal - inserir a descrição da imagem aqui

Eu gostaria de fazer assim, ao passar o mouse sobre o a ancora pegar os datas via jquery e atribuir no background style do span, substituindo o que ja esta por default nele e ao tirar o mouse voltar para o que ja estava nele.

Ou seja, trabalhar só com o data-over e com o data-out.

<a data-over="https://i.sstatic.net/sW2RX.gif"  data-out="https://i.sstatic.net/TvBU6.gif">
   <span style="background-image: url(https://i.sstatic.net/TvBU6.gif);"></span>
   <span>Home</span>    
</a>

Se alguém poder me ajudar.

3
  • Amigo, sua pergunta é enorme e pouco esclarecedora. Poderia ser mais direto no que vc quer fazer.
    – Sam
    Commented 20/10/2017 às 23:16
  • Ola amigo, vou editar Commented 20/10/2017 às 23:37
  • Diu uma enxugada boa :D Acho que ficou melhor agora @DvD Commented 20/10/2017 às 23:57

1 Resposta 1

1

HTML

<a class="mama" data-over="https://minecraft.net/static/theme/img/gif/menu-buy.gif" data-out="https://minecraft.net/static/theme/img/gif/menu-buy--reversed.gif">
  <img src="https://minecraft.net/static/theme/img/gif/menu-buy--reversed.gif" />    
</a>

<a class="mama" data-over="https://minecraft.net/static/theme/img/gif/menu-realms.gif" data-out="https://minecraft.net/static/theme/img/gif/menu-realms--reversed.gif">
  <img src="https://minecraft.net/static/theme/img/gif/menu-realms--reversed.gif" />    
</a>

<a class="teste" data-over="https://minecraft.net/static/theme/img/gif/menu-store.gif" data-out="https://minecraft.net/static/theme/img/gif/menu-store--reversed.gif">
  <img src="https://minecraft.net/static/theme/img/gif/menu-store--reversed.gif" />    

JQuery

$("a").hover(
   function()
   {
      $(this).find("img").attr("src", $(this).data("over"));
   },
   function()
   {
      $(this).find("img").attr("src", $(this).data("out"));
   }                         
 );
2
  • 1
    É isso mesmo! Marque a resposta como certa.
    – Sam
    Commented 21/10/2017 às 4:07
  • Muito obrigado pela ajuda. Nao consigo marcar meu proprio post. Commented 21/10/2017 às 11:31

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 .