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

-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

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

回答

相关问题