如何在鼠标悬停时设置颜色 - css
How to set color on mouse hover - 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>
我的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
试试这个css
.social-top-nav:hover {
color:blue;
}
您无法更改圆圈的颜色(因为它是图像的一部分)
但你可以:
1 - 添加一个css边框圆圈(然后改变颜色):
border: 1px solid #ccc;
border-radius: 50%;
2 - 尝试用 Font Icons
替换您的图片
3 - 使用 webkit-filter(这不能解决您的问题,我发布以防万一)
我的网站上有社交栏,其中包括 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;
}
你们能帮我修改一下代码吗?我将不胜感激。
knitevision
试试这个css
.social-top-nav:hover {
color:blue;
}
您无法更改圆圈的颜色(因为它是图像的一部分)
但你可以:
1 - 添加一个css边框圆圈(然后改变颜色):
border: 1px solid #ccc;
border-radius: 50%;
2 - 尝试用 Font Icons
替换您的图片3 - 使用 webkit-filter(这不能解决您的问题,我发布以防万一)