我如何应用淡入淡出效果？

Question

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

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

我的导航菜单是由一个模式捉襟见肘使用CSS的重复-X的性能。上面的代码工作得很好。现在我想对我用于悬停的图像应用淡入淡出效果。我该怎么做？

Answer 1

你不能在背景图像上淡入淡出。

可能的解决方案是使用绝对定位为锂标签的div。如果你想绝对定位您的li元素一些如何

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

问题就来了：即：

<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;} 

这样你就可以说。我没有测试过，但这种方式应该可以工作。