如何为此应用淡入和淡出效果？

Question

我有一个导航菜单，当发生悬停事件时，我正在使用悬停元素更改图像。 我正在使用以下CSS

#navigation li.contact a:hover {
    margin-left:1px;
    background: url('../img/hover.jpg') no-repeat;
    float:left;
    width:147px;
    height:109px;
}

我的导航菜单由使用CSS的repeat-x属性扩展的模式组成。 上面的代码工作得很好。 现在，我想在我用于悬停的图像上应用淡入和淡出效果。 我该怎么做？

Answer 1

您不能在背景图像上褪色。

可能的解决方案是使用绝对位于li标签的div。 即：

<ul id="navigation">
   <li class="contact">
      <div class="background"></div>
      <a href="">some menu</a>
   </li>
</ul>

CSS应该像这样：

#navigation li{position: relative;}
#navigation .background{position: absolute; top:0px; left: 0px; opacity: 0;}

这样您可以说：

$('#navigation').find('li').hover(function(){
   $(this).find('.background').fadein();
}, function(){
   $(this).find('.background').fadeOut();
})

如果您想完全确定li元素的位置，就会出现问题。 我还没有测试过，但是这样就可以了。