Html 如何设置鼠标悬停的颜色-css

我的网站上有社交栏，包括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>

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

knitevision

尝试使用此css

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

---

无法更改圆的颜色（因为它是图像的一部分）

但你可以：

1-添加css边框圈（然后更改颜色）：

2-尝试将图像替换为

---

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

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

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

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