無法更改圖像上的懸停顏色/圖標

-1

我創建了一個圓形圖標，並在中心添加了一個圖像。我不希望圖像在懸停時改變顏色。圖標中唯一真正的部分是圓圈。我曾嘗試在該圓圈圖標類似的代碼添加懸停：無法更改圖像上的懸停顏色/圖標

.circle-icon a:hover { 
color: #0cf; 
background-image:url(../images/phone-icon-blue-sm.png)}

所以我試圖換出的圖像上懸停，並試圖通過添加一行樣式表來改變顏色以上。我不確定我甚至可以做我想做的事情，而無需使用JavaScript創建翻轉，我對此不感興趣。演示頁面在：

http://tahoe-luxury-properties.com/index2.html

我遇到麻煩的圖標是頁面右下方的電話鏈接。鏈接在圖標上的臉書工作得很好。只是不是我家做的圖標。我可能有一些我可以使用的代碼，但需要搜索出來。任何幫助，想法都非常感激。謝謝，Beth

來源

2016-09-18 bethabernathy

'.circle-icon'是'a'元素的子元素，所以你不能像這樣定位它。你也應該將原始圖像設置爲css背景，而不是像'' – jakob

那樣的html。尋求調試幫助的問題（「爲什麼這個代碼不工作？」）必須包含所需的行爲，特定的問題或錯誤以及最短的代碼有必要在問題本身中重現它。沒有明確問題陳述的問題對其他讀者無益。請參閱：如何創建[mcve]。* – BSMP

你不能通過CSS設置一個新的img src。或者您使用兩個背景或兩個img的標籤（一個隱藏，顯示在懸停並隱藏另一個）。

/* hide second image, hide first on hover */ 
#social-icon-menu a em > img:last-child, #social-icon-menu a:hover em > img:first-child { 
    display: none; 
} 

/* show second on hover */ 
#social-icon-menu a:hover em > img:last-child { 
    display: block; 
}

順便說一句，我注意到，你的主題包含FontAwesome，是更好的使用它，因爲它是一個字體圖標，所以你可以改變自己的顏色，通過使用CSS顏色屬性。

來源

2016-09-18 22:43:38

無法更改圖像上的懸停顏色/圖標

回答

相關問題