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使用颜色属性来改变颜色。

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

1 个答案: