Help with Hover jquery

Asked

Viewed 51 times

3

I’m trying to make this menu lively (https://minecraft.net/pt-br/).

Gifs for testing (get the ):

State Hover - inserir a descrição da imagem aqui

Normal state - inserir a descrição da imagem aqui

I would like to do so, by hovering the mouse over the anchor to take the dates via jquery and assign in the background style of span, replacing what is already default in it and taking the mouse back to what was already in it.

That is, work only with the date-over and with the date-out.

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

If anyone can help me.

jquery

  • Friend, your question is huge and not very enlightening. Could you be more direct in what you want to do.

  • Hey, buddy, I’m gonna edit

  • Diu uma xugada boa :D I think it looks better now @Dvd

1 answer

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"));
   }                         
 );
  • 1

    That’s right! Mark the answer as right.

  • Thank you so much for your help. I can’t mark my own post.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.