如何在鼠标悬停上设置颜色 - css

时间:2015-04-07 11:00:32

标签: html css image hover opacity

我的网站上有社交栏,其中包括facebook,twitter,google +和rss。

看起来像这样

enter image description here

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

我的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; 
}

你们可以帮我修复代码吗?我会感激任何意见。

knitevision

enter image description here

2 个答案:

答案 0 :(得分:2)

你无法改变圆圈的颜色(因为它是图像的一部分)

但你可以:

1 - 添加一个css边框圆圈(然后更改颜色):

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

2 - 尝试用Font Icons

替换您的图片

3 - 使用webkit-filter(这不会解决您的问题,我发布以防万一)

答案 1 :(得分:0)

试试这个css

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