懸停，按下和活躍狀態不顯示1個按鈕在導航欄

Question

我有一個基於CSS的精靈蘋果爲主題的導航欄，您可以查看這裏：

http://www.marioplanet.com/index.asp

現在，對於一些原因，我不明白爲什麼，在「主頁」按鈕的懸停，按下和活動狀態中似乎存在問題。出於某種原因，它看起來是靜態的。

這個文件，http://www.marioplanet.com/css/nav.css

其中有這樣的代碼：

/* GLOBALHEADER */ 
#globalheader { width: 671px; height: 37px; margin: auto; position: relative; z-index: 100; } 
#globalheader #globalnav { margin: 0; padding: 0; zoom: 1; width: 100%;} 
#globalheader #globalnav:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
#globalheader #globalnav li { display: inline; } 
#globalheader #globalnav li a { float: left; width: 103px; height: 37px; text-indent:-1000em; overflow: hidden; background-image:url(/images/globalnav/wanzart.png); _background-image: url(/images/globalnav/wanzart.png); background-repeat: no-repeat; } 
#globalheader #globalsearch { background-image: url(/images/globalnav/wanzart.png); _background-image: url(/images/globalnav/wanzart.png); background-repeat: no-repeat; } 

/* BUTTONS */ 
#globalheader #globalnav li#gn-home a { background-position: 0px 0px; } 
#globalheader #globalnav li#gn-catalog a { background-position: -103px 0px; } 
#globalheader #globalnav li#gn-about a { background-position: -206px 0px; } 
#globalheader #globalnav li#gn-contact a { background-position: -309px 0px; } 
#globalheader #globalnav li#gn-media a { background-position: -412px 0px; } 

/* OVER STATES */ 
#globalheader #globalnav li#gn-home a:hover { background-position: 0px -37px; } 
#globalheader #globalnav li#gn-catalog a:hover { background-position: -103px -37px; } 
#globalheader #globalnav li#gn-about a:hover { background-position: -206px -37px; } 
#globalheader #globalnav li#gn-contact a:hover { background-position: -309px -37px; } 
#globalheader #globalnav li#gn-media a:hover { background-position: -412px -37px; } 

/* PRESSED STATES */ 
#globalheader #globalnav li#gn-home a:active { background-position: 0px -76px; } 
#globalheader #globalnav li#gn-catalog a:active { background-position: -103px -76px; } 
#globalheader #globalnav li#gn-about a:active { background-position: -206px -76px; } 
#globalheader #globalnav li#gn-contact a:active { background-position: -309px -76px; } 
#globalheader #globalnav li#gn-media a:active { background-position: -412px -76px; } 

/* ON STATES */ 
#globalheader.home #globalnav li#gn-home a:hover { background-position: 0px 0px !important;} 
#globalheader.catalog #globalnav li#gn-catalog a { background-position: -103px -114px !important; } 
#globalheader.about #globalnav li#gn-about a { background-position: -206px -114px !important; } 
#globalheader.contact #globalnav li#gn-contact a { background-position: -309px -114px !important; } 
#globalheader.media #globalnav li#gn-media a { background-position: -412px -114px !important; } 

/* GLOBAL SEARCH */ 
#globalsearch {width: 156px; height: 37px; position: absolute; top:0; right: 0; background-position: 100% 0; background-repeat: no-repeat; text-align: center; border-width: 0px; } 
#inputString{background: url(/images/globalnav/searchform.png); padding: 1px 20px 0 20px; width: 113px; height: 20px; margin-top: 7px; border: none; outline: none; } 

大概是問題所在。

我一直在谷歌的DevTools（基本上是FireBug）中嘗試和隔離問題，但我沒有任何運氣。

「主頁」按鈕狀態的選擇器顯示爲準確。

和源圖像（http://marioplanet.com/images/globalnav/wanzart.png）具有實際狀態，所以這不是問題..

Answer 1

您的規則在這裏剛下/* ON STATES */是什麼原因引起的：

#globalheader.home #globalnav li#gn-home a:hover { background-position: 0px 0px !important;} 

既然你在主屏幕上，你#globalheader看起來是這樣的：

<div id="globalheader" class="home"> 

所以不像別人，#globalheader.home選擇器是在此處應用，覆蓋所有懸停狀態。要麼刪除此規則，要麼將其更改爲background-position: 0px -37px，這可能意味着什麼......當您在主頁上時，該主頁無法啓動。

Answer 2

記住，當你的風格和超鏈接的不同狀態有風格的順序是非常重要的：

':link' or just 'a' then 
':visited' then 
':hover' then 
':active' then 

簡單的方法來記住順序 - >愛恨

因此，嘗試重新排序，而不是由國家，每個按鈕的CSS代碼。

另外你的按鈕CSS是太具體的IMO。如果您使用的是ID，假設它們在頁面上是唯一的，那麼您可以直接對其進行安全定位。