爲什麼這個圖像替換技術不起作用？

Question

我正在嘗試實踐圖像替換技術，主要用於導航目的。我似乎無法弄清楚爲什麼它不起作用。懸停工作，但默認的菜單項不。我很確定事情寫得正確。

http://lrroberts0122.github.com/DWS/practical/index.html

這裏的FO導航的HTML：

<ul id="nav"> 
    <li id="process"><a href="index.html" id="active">Our Process</a></li> 
    <li id="function"><a href="function.html">Bio-Built Function</a></li> 
    <li id="future"><a href="future.html">The Future</a></li> 
    <li id="engage"><a href="engage.html">Engage Dio</a></li> 
</ul> 

這裏是我的導航CSS：

#nav { 
    list-style: none; 
    width: 244px; 
    height: 124px; 
    overflow: hidden; 
    } 

#nav li { 
    float: left; 
    } 

#nav li a { 
    width: 244px; 
    height: 30px; 
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
    display: block; 
    background: url('../img/bg_nav.png'); 
    } 

#process { 
    background-position: 0 0; 
    } 

#process:hover { 
    background-position: -244px 0; 
    } 

#function { 
    background-position: 0 -31px; 
    } 

#function:hover { 
    background-position: -244px -31px; 
    } 

#future { 
    background-position: 0 -60px; 
    } 

#future:hover { 
    background-position: -244px -62px; 
    } 

#engage { 
    background-position: 0 -90px; 
    } 

#engage:hover { 
    background-position: -244px -93px; 
    } 

Answer 1

首先，你寫的有不匹配的選擇之一與我在網站上看到的：#nav li a是#nav li在您的網站上。

其次，你需要小心的CSS選擇器特異性：

#nav li 

將否決：

#process 

但：

#nav #process 

不會被推翻。

您可以找到有關特異性這裏很好的文章：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 2

我將包括：

#nav li a { 
    width: 244px; 
    height: 30px; 
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
    display: block; 
    background: url('../img/bg_nav.png'); 
    } 

的#process（其中的方式類可能更好地工作）

#process { 
     width: 244px; 
     height: 30px; 
     text-indent: 100%; 
     white-space: nowrap; 
     overflow: hidden; 
     display: block; 
     background: url('../img/bg_nav.png'); 

內

擺脫#nav li a 在CSS而不是HTML，並試試這個：

#process { 
     width: 244px; 
     height: 30px; 
     text-indent: 100%; 
     white-space: nowrap; 
     overflow: hidden; 
     display: block; 
     background: url('../img/bg_nav.png'); 
     background-position: 0 0; 
} 

#process:hover { 
    background-position: -244px 0; 
} 

等，爲功能&其他...

，如果我錯過了什麼，或者如果你有任何問題，請在意見。