如何在鼠标悬停时设置颜色 - css答案

【问题标题】：How to set color on mouse hover - css如何在鼠标悬停时设置颜色 - css
【发布时间】：2015-06-11 22:54:35
【问题描述】：

我的网站上有社交栏，包括 facebook、twitter、google+ 和 rss。

看起来像这样

鼠标悬停时，我希望图像周围的圆圈将颜色变为蓝色。不知何故，我总是以失败告终，整个背景变成蓝色。

我的 HTML 代码

<div class="social-top-nav">
    <ul>
        <li><a href="#"><img src="images/facebook.png" title="facebook" /></a></li>
        <li><a href="#"><img src="images/twitter.png" title="twitter" /></a></li>
        <li><a href="#"><img src="images/google.png" title="google+" /></a></li>
        <li><a href="#"><img src="images/feed.png" title="rss" /></a></li>
    </ul>
</div>

我的 CSS 代码

.social-top-nav{
    float:right;
    margin-top: 11px;
}

.social-top-nav ul li{
    display:inline-block;
}
.social-top-nav ul li a{
    display:block;
}

.social-top-nav ul li a img:hover{
    opacity: 0.8;
    -moz-box-shadow: 0 0 10px #ccc; 
    -webkit-box-shadow: 0 0 10px #ccc; 
    box-shadow: 0 0 10px #ccc; 
}

你们能帮我修复代码吗？如有任何意见，我将不胜感激。

针织

【问题讨论】：

你能分享一个Fiddle吗？
为你的东西创建一个演示
创建一个演示。这段代码还不够。

标签： html css image hover opacity

【解决方案1】：

你不能改变圆圈的颜色（因为它是图像的一部分）

但你可以：

1 - 添加一个css边框圆（然后改变颜色）：

border: 1px solid #ccc;
border-radius: 50%;

2 - 尝试将您的图片替换为 Font Icons

3 - 使用webkit-filter（这不能解决你的问题，我只是以防万一）

【讨论】：

【解决方案2】：

试试这个css

.social-top-nav:hover {
  color:blue;
 }

【讨论】：