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元素。我没有测试过，但这种方式应该有效。

我如何应用fadein和fadeout效果呢？

1 个答案: