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

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

這樣你就可以說。我沒有測試過，但這種方式應該可以工作。