試圖執行：在自定義圖像導航欄上懸停

Question

我在CSS中使用錨點（特別是：懸停）標記掙扎。這裏是我的jsfiddle：

http://jsfiddle.net/yXwng/

基本上我有一個自定義圖像（在撥弄我擺脫它，因爲我只是想了解的語法和線東西）導航欄。導航欄是一個div，我在導航欄上有五個鏈接，都是嵌套的div。

爲了使每個嵌套的div鏈接（我使整個div鏈接），我添加了一個透明png作爲背景圖像，並將鏈接設置爲背景圖像，因此導航欄自定義圖像仍然顯示，你可以點擊導航欄上的鏈接。

現在，我試圖爲每個導航欄元素製作懸停/滾動圖片。當我滾動時，它會顯示新圖像，但它完全錯誤（在原始圖像位置的右側）。在我的小提琴上，我使用了代碼，但不是我使用的圖像，我只是使用邊框進行對齊。你可以看到在這個例子中，紅框（這是錨點）出於某種原因與div沒有排隊。這正是我試圖實現懸停圖像時出現的位置。

任何想法？謝謝！

Answer 1

如果添加相同的尺寸，以你的鏈接，那麼它應該很好地工作：

#homelink a{ 
    border:1px solid red; 
    width: 200px; 
    height: 40px; 
    display:inline-block; 
} 

Answer 2

你需要給一個顯示塊和一些線高度<a>這樣的：

#homelink a { 
border: 1px solid red; 
display: block; 
line-height: 10px; 
} 

它將與div對齊。順便說一句，你需要使用UL LI結構。