如何設置導航與衰落（子畫面）的背景圖像

Question

我已經設計了一個子畫面，看起來像這樣：

的想法是具有圖像的上部淡入懸停（在導航系統中）。除了導航項目的文本外，我已經可以工作了。正如您在this page上看到的那樣，導航文本與背景圖像淡入淡出，因爲它包含在淡入淡出的範圍內。我想知道是否有人能夠幫助我讓我的頭腦如何保持文本始終顯示。

下面是HTML：

<ul class="navigation"> 
    <li><a href=""><span>home</span></a></li> 
    <li><a href=""><span>contact</span></a></li> 
</ul> 

而CSS：

body, ul,li { 
    margin:0; 
    padding:0; 
} 

ul { 
    list-style:none; 
    text-align: center; 
    color: white; 
    line-height: 30px; 
} 

ul a { 
    text-decoration: none; 
    color: white; 
    font-size: 18px; 
} 

.navigation li { 
    background: url(nav.png) no-repeat 0 -30px; 
    width: 223px; 
    height: 30px; 
} 

.navigation li span { 
    background: url(nav.png) no-repeat 0 0px; 
    width: 223px; 
    height: 30px; 
    display: block; 
    opacity: 0; 
    filter: alpha(opacity=0); 
} 

和腳本：

$(document).ready(function() { 
    $(".navigation li a").hover(function() { 
     $(this).children("span").stop().animate({ 
      opacity: 1 
     }, 300); 
    }, function() { 
     $(this).children("span").animate({ 
      opacity: 0 
     }, 400); 
    }); 
}); 

感謝，

尼克

Answer 1

這應該做的伎倆。活例如：http://jsfiddle.net/zDwP9/2/ HTML

：（外的遷spana標籤）

<ul class="navigation"> 
    <li><a href="">home</a><span></span></li> 
    <li><a href="">contact</a><span></span></li> 
</ul> 

CSS的變化：（加寬li，浮動a左和span右，調整寬度和span背景位置）

ul a { 
    text-decoration: none; 
    color: white; 
    font-size: 18px; 
    float:left; 
    width: 204px; 
} 

.navigation li span { 
    background: url(nav.png) no-repeat -204px 0; 
    width: 30px; 
    height: 30px; 
    display: block; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    float:right; 
} 

的jQuery/JavaScript的：（從li a更改選擇到li）

$(document).ready(function() { 
    $(".navigation li").hover(function() { 
     $(this).children("span").stop().animate({ 
      opacity: 1 
     }, 300); 
    }, function() { 
     $(this).children("span").animate({ 
      opacity: 0 
     }, 400); 
    }); 
}); 

Answer 2

不要把背景圖像放在跨度上。

HTML

<ul class="navigation"> 
    <li><a href=""><div class="background"></div><span>home</span></a></li> 
    <li><a href=""><div class="background"></div><span>contact</span></a></li> 
</ul> 

CSS

.navigation li { 
    position: relative; 
    background: url(nav.png) no-repeat 0 -30px; 
    width: 223px; 
    height: 30px; 
} 

.navigation li span { 
    width: 223px; 
    height: 30px; 
    display: block; 
    opacity: 0; 
    filter: alpha(opacity=0); 
} 

.navigation li .background { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    background: url(nav.png) no-repeat 0 0px; 
    width: 223px; 
    height: 30px; 
} 

JS

$(document).ready(function() { 
    $(".navigation li a").hover(function() { 
     $(this).children(".background").stop().animate({ 
      opacity: 1 
     }, 300); 
    }, function() { 
     $(this).children(".background").animate({ 
      opacity: 0 
     }, 400); 
    }); 
});