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

我的社交酒吧位于我的网站上，其中包括脸书，推特，谷歌+和rss。如何在鼠标悬停上设置颜色 - css

它看起来像这样

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

来源

2015-04-07 aiden87

你能分享[小提琴]（http://jsfiddle.net/）？ –

创建一个演示你的东西 – knitevision

创建演示。这个代码是不够的。 – knitevision

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

但您可以：

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

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

2 - 尝试用Font Icons

3来代替你的图像 - 使用webkit-filter（这不会解决你的问题，我只是为了以防万一）

来源

2015-04-07 11:16:19 Rod

谢谢，这解决了我的问题:) – aiden87

尝试这个CSS

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

来源

2015-04-07 11:13:48

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

回答

相关问题