jquery - 在 jquery fadein/fadeout 之后保留 <a> 文本

Question

我有一个用 jquery 编写的函数，它应该淡入和淡出一个 Sprite (没有文本的 Sprite )从一个背景到另一个背景，并且它按预期工作。但是这个函数也从一个元素中淡出我的文本。 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();
  });
});

是否可以保留该文本？我知道我可以使用带有添加文本的 sprite，但我还为该文本编写了一个动画，所以我想保留它。

这是我的 fiddle :http://jsfiddle.net/vrt15/jzn7gb97/

问候

Answer 1

z-index 是你的 friend :

.hov {
    z-index: 0;
}

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

Updated fiddle