javascript - 我如何为此应用淡入淡出效果？

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 属性拉伸(stretch)的图案组成。上面的代码工作得很好。现在我想对我用于悬停的图像应用淡入淡出效果。我该怎么做？

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 元素，问题就来了。我还没有测试过，但这样应该可以。