Help with Hover jquery

Question

Help with Hover jquery

Asked 7 years, 2 months ago

Viewed 51 times

3

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

Gifs for testing (get the ):

State Hover -

Normal state -

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.

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

– Sam

2017/10/20 at 23:16
Hey, buddy, I’m gonna edit

– AntonioSantos

2017/10/20 at 23:37
Diu uma xugada boa :D I think it looks better now @Dvd

– AntonioSantos

2017/10/20 at 23:57

1 answer

Browser other questions tagged jquery

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

by AntonioSantos • **161** points · Answer 1 · 2017-10-21T02:22:49+00:00

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