a：懸停 - 在文本導航中使用圖像

我試圖在我的投資組合上編碼我的導航，並且正在尋找比使用背景位置和css精靈更簡單的方法。a：懸停 - 在文本導航中使用圖像

基本上我需要類似於這個網站的導航：http://www.ernesthemingwaycollection.com/當你將鼠標懸停在導航上時，它下面會出現一個條。

是否有一個更簡單的方法來做到這一點，或者我必須使用背景定位。

順便說一句，我用文本作爲我的導航，寧願保持它的方式，而不是使用圖像的導航。我只想爲懸停圖片使用圖片。我試圖簡單地通過使用下面的代碼來做到這一點：

#nav a:hover { 
background: url('Images/Nav_Hover.png') no-repeat; 
}

但是，我似乎無法定位圖像？任何幫助？

在此先感謝！

來源

2010-08-15 MozazDesign

你是什麼意思「定位圖像」？你能澄清一點嗎？爲背景提供一個位置或單獨使用背景位置是如何移動元素中的背景，但我不確定從描述中究竟遇到什麼問題。 – 2010-08-15 13:01:32

對不起。我的意思是Nav_Hover.png圖片。我似乎無法改變它在頁面上的位置，按邊距等。 – MozazDesign 2010-08-15 13:09:29

#nav a:hover { 
    background: url('Images/Nav_Hover.png') no-repeat 10px 20px; 
}

其中10px是水平定位和20px的垂直。或僅使用background-position如前所述。

來源

2010-08-17 09:36:23 Jasper

完美！非常感謝Psy！：d – MozazDesign 2010-08-17 20:28:03

您不必使用精靈，但由於以下幾個原因，它通常更高效。

你可以只使用一個完全不同的圖像，例如：

a { background: url('image.jpg'); } 
a:hover { background: url('image-hover.jpg'); }

但是要注意，因爲它加載圖像在第一時間（用於遠程用戶有可能在懸停稍有延遲，你贏了在本地沒有延遲注意到這一點）...所以你可能想要預先加載這些懸停圖像。這是由自然界精神照顧的東西，所以完全不要把它們作爲一個選項拋出......有資源來幫助創建它們，如果這是關注。

來源

2010-08-15 12:50:07

正如Nick所說，延遲和預加載還會增加瀏覽器發出的HTTP請求數量，從而減慢加載時間。 – Sam152 2010-08-15 12:55:01

爲了解決您的問題，我認爲使用1個圖像的正常和懸停狀態，不僅是簡單的方法，也是最好的方法。沒有預加載/延遲問題，沒有瀏覽器問題（懸停在ie6中不工作除外）。

導航精靈非常簡單。當你爲所有圖像使用它時，定位是一個Bia ***。讓懸停圖像與最寬的鏈接一樣寬，並且一個小小的CSS將完成所有工作。

a.navLink { background:url(image) no-repeat; /* and ofcourse witdh and stuffs */ } 
a.navlink:hover { background-position:0px -20px; /* height of button */ }

我不認爲它可以更容易..不同的方式是使用javacript，但我不會這樣做的懸停。

來源

2010-08-15 15:41:01 no1cobla

a：懸停 - 在文本導航中使用圖像

回答

相關問題