keeping <a> text after jquery fadein/fadeout

1
votes

I´ve got a function written in jquery which is supposed to fadein and fadeout a sprite (sprite without text) from 1 background to another, and its working as expected. But this function is also fading out my text from within a element. HTML:

<div id="menu">
    <ul class="main_menu current-s1">
     <li class="s1"><a class="hov" id="main" href="/portfolio" title="main">MAIN<span></span></a></li>
     <li class="s2"><a class="hov" id="me" href="/portfolio" title="me">ME<span></span></a></li>
    </ul>        
</div>

Jquery:

$(function() {
  $(".hov").find("span").hide().end().hover(function() {
    $(this).find("span").stop(true, true).fadeIn();
  }, function() {
    $(this).find("span").stop(true, true).fadeOut();
  });
});

Is is possible to keep that text ? I know i could use a sprite with added text, but ive got an animation also written for that text so id like to keep it.

Here is my Fiddle: http://jsfiddle.net/vrt15/jzn7gb97/

Regards

1
jquerycssfadeinfadeout

1 Answers

0
votes

z-index is your friend:

.hov {
    z-index: 0;
}

.hov span {
    z-index: -1;
}

Updated fiddle