CSS懸停：似乎並不奏效

我做這個設置一個導航欄：CSS懸停：似乎並不奏效

<div id="globalheader"> 
     <ul id="globalnav"> 
      <li id="home"><a href="#">Home</a></li> 
     </ul> 
</div>

請注意我剝奪了很多項目，因爲它將使這個例子太大。

現在，這裏是我的CSS：

/* GLOBALHEADER */ 
#globalheader { width: 506px; height: 36.75px; margin: 18px auto; position: relative; z-index: 9998; } 
#globalheader #globalnav { margin: 0; padding: 0; } 
#globalheader #globalnav li { display: inline; } 
#globalheader #globalnav li a { float: left; width: 101.2px; height: 0; padding-top: 36.75px; overflow: hidden; } 
#globalheader #globalnav li a, 
#globalheader #globalnav { background-image: url(navbar.png); background-repeat: no-repeat; } 


/* BUTTONS */ 
#globalheader #globalnav li#home a { background-position: 0 0; } 

/* OVER STATES */ 
#globalheader #globalnav li#home a:hover { background-position: 0 -37; } 

/* PRESSED STATES */ 
#globalheader #globalnav li#home a:active { background-position: 0 -73.5px; }

現在，有更多的項目（正如我前面說的），我拿出只是空間的緣故。

下面是問題：按鈕顯示正常，並且還有active狀態。但是，hover似乎並沒有工作。有任何想法嗎？

來源

2011-01-27 sudo rm -rf

哪些瀏覽器（和版本），你跟測試？ – Spudley 2011-01-27 16:09:08

是的，我意識到我應該讓我的導航欄不使用小數。 :) – 2011-01-27 16:09:30

嘗試增加像素，以您的位置：

#globalheader #globalnav li#home a:hover { background-position: 0 -37px; }

來源

2011-01-27 16:09:28 wajiw

CSS懸停：似乎並不奏效

回答

相關問題