更改a：鏈接的背景圖像：hover

我想要獲取背景圖像，以便在鏈接懸停時更改鏈接。基本上，懸停圖像是一種不同的顏色，所以我只是想改變圖像的顏色（這是不可能的，我不知道，所以我只是交換圖像）。更改a：鏈接的背景圖像：hover

的代碼標識顯示：

<a href="/" id="logo"></a>

而CSS：

#logo { 
position: absolute; 
display: block; 
margin-top: 10px; 
margin-left: 10px; 
background: url('../img/logo.png') no-repeat; 
width: 60px; 
height: 60px; 
} 

#logo a:hover { 
background: url('../img/logo-blue.png') no-repeat; 
}

有我一個更好的方式來顯示會更容易推動這一懸停的標誌？

編輯（添加頁眉CSS）：

#header { 
height: 75px; 
text-align: right; 
position: relative; 
} 

#header h2 { 
font-size: 2.5em; 
font-weight: 400; 
text-transform: uppercase; 
letter-spacing: 0.1em; 
padding-top: 15px; 
}

來源

2012-12-12 josiahwiebe

css sprite。將兩個圖像組合成一個具有並排徽標的圖像。要設置懸停的風格，請使用「background-position」定位背景圖像。這節省了一個http請求。 – Jrod

改變它從#logo a:hover到#logo:hover，因爲你的<a>元素是的#logo元素。

此外，其他一些小竅門：

縮進你的CSS，以使其更容易除了選擇和其他規則集是告訴屬性。
將CSS引用的圖片和其他資源保存在樣式表所在的目錄中，這樣您就不需要相對URI並將所有內容都保存在一起。
爲什麼使用position: absolute;沒有top/right/bottom/left屬性？你想達到什麼效果？

來源

2012-12-12 02:19:17 Dai

啊！非常好的一點。 CSS通常在我的編輯器中縮進，在發佈到此網站時丟失了這些縮進。我使用'position：absolute'來保持我的標誌圖像和我的標題對齊。徽標左對齊，標題對齊右邊。我已經附加了我的問題頭CSS。 – josiahwiebe

更改a：鏈接的背景圖像：hover

回答

相關問題