无法更改图像/图标上的悬停颜色

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 属性更改他的颜色。