如何在鼠標懸停上設置顏色 - 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

回答

相關問題