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

Question

我創建了一個圓形圖標並在中心添加了一個圖像。 我不想圖像在懸停時改變顏色。 圖標的唯一真實部分是圓圈。 我嘗試在圓形圖標的代碼中添加懸停，例如：

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

所以在上面我試圖在懸停時換出圖像並嘗試通過向樣式表添加一行來更改顏色。 我不確定我什至可以在不使用 javascript 創建翻轉的情況下做我想做的事情，我對此並不感到興奮。 演示頁面位於：

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

我遇到問題的圖標是頁面右下角的電話鏈接。 用圖標鏈接的 Facebook 運行良好。 只是不是我自制的圖標。 我可能有一些我可以使用的代碼，但需要搜索出來。 任何幫助，想法都非常感謝。 謝謝，貝絲

Answer 1

您不能通過 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 使用 color 屬性更改他的顏色。