HTML CSS懸停按鈕導航

我正在使用圖像按鈕進行導航，因爲我想要懸停效果。我的意思是，我使用的是按鈕圖像而不是<ul>標籤或<div>標籤，因爲我需要懸停效果，這意味着當我將鼠標懸停在圖像上時，圖像會發生變化。這就是爲什麼我使用圖像按鈕。HTML CSS懸停按鈕導航

但是，我不想使用圖像。我想使用<ul>標記和<div>標記，但我不熟悉如何對這些標記執行懸停效果。

請幫幫我。

來源

2010-09-08 Gitesh Dang

如果您打算爲新用戶投票，至少告訴他們爲什麼。 – 2010-09-08 14:01:52

您需要使用CSS才能做到這一點。如果你想有一個按鈕列表，那麼我強烈建議你使用ul父元素，然後使用li子元素。不要在ul中使用div。您在圖像路徑指定的任何圖像

<ul> 
    <li id='button1'>Button 1</li> 
    <li id='button2'>Button 2</li> 
</ul> 

#button1 {background-image: url(IMAGE PATH GOES HERE)} 
#button1:hover {background-image: url(HOVER IMAGE PATH GOES HERE)}

CSS屬性background-image地方GOES HERE爲背景的該元素。：懸停僞選擇器允許您在用戶使用鼠標懸停圖像時更改圖像。在這種情況下，我們提供了一個不同的圖像路徑，在li被徘徊時有效地改變圖像。

如果你不熟悉CSS，you can learn more about it here。

來源

2010-09-08 14:00:09

感謝這個答案，但我不想使用圖像...在這種情況下，我如何實現此代碼... – 2010-09-08 14:04:12

@giteshdang你試圖在懸停上創建什麼樣的效果？實質上，您只需要將背景圖像更改爲您嘗試更改的任何屬性。我不能告訴你哪一個人不知道你想要創造什麼效果。如果你告訴我效果，我會試着指出你朝着正確的方向。 – 2010-09-08 14:08:34

actualy在一些網站，當我們將指針懸停在導航按鈕上有一個按鈕的背景上的變化..我想知道那是圖像或div ..？ – 2010-09-08 14:24:08

所有現代瀏覽器都可以在每個元素上渲染:hover CSS選擇器。您只需更改<ul>標籤的background-image屬性即可。

但有很多可能性與JavaScript，jquery等，這將使您可以在每個瀏覽器中使用它。

來源

2010-09-08 13:52:22 jolt

非常感謝湯姆 – 2010-09-08 14:02:11

不知道如果我理解，但如果我這樣做是這樣的：

ul:hover 
{ 
background-color: #f00; 
}

或

div:hover 
{ 
background-color: #f00; 
}

一樣好一個答案，我可以給考慮的問題。

來源

2010-09-08 13:52:46 Kyle

HTML CSS懸停按鈕導航

回答

相關問題