保持<a> text after jquery fadein/fadeout</a>

时间:2014-08-27 09:59:06

标签: jquery css fadein fadeout

我有一个用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();
  });
});

是否可以保留该文字?我知道我可以使用带有添加文本的精灵,但我也有一个动画也是为该文本编写的,所以我想保留它。

这是我的小提琴:http://jsfiddle.net/vrt15/jzn7gb97/

此致

1 个答案:

答案 0 :(得分:0)

z-index是你的朋友:

.hov {
    z-index: 0;
}

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

Updated fiddle