如何更改懸停的fontawesome圖標背景？ jsfiddle

我想通過在敞開的正方形內插入一個圖標來使用fontawesome創建圖標。懸停時，我想更改正方形內背景的顏色，以及正方形的實際顏色和圖標顏色。如何更改懸停的fontawesome圖標背景？ jsfiddle

我已經在這裏放一個例子：http://jsfiddle.net/5hzv3/2/

.social-icons .fa-square-o:hover { 
    background-color: #3b5998; /* This overflows outside the square */ 
    color: #fff 
}

的問題是，你實際上盤旋在廣場的子元素，所以我試圖得到這個工作。

來源

2013-11-14 JROB

這就是你需要什麼？

小提琴：http://jsfiddle.net/5hzv3/6/

只是改變了你的CSS本：

.fa-lg:hover { color: #fff } 
.fa-lg:hover > i { color: #3b5998; }

如果僅方必須改變。這是代碼：

.fa-lg:hover { color: #fff } 
.fa-lg:hover > .fa-square-o { color: #3b5998; }

編輯我創建了一個例子，可以幫助你。這是不是一個適用於每種情況下的通用CSS，buuut，可能會給你的想法。

希望它可以幫助... http://jsfiddle.net/5hzv3/15/

來源

2013-11-14 13:30:57

這正是它除了我試圖讓藍色懸停在圓角正方形內。 http://jsfiddle.net/5hzv3/5/ – JROB

更新小提琴... –

謝謝你的幫助。我正在嘗試更新圓角正方形內部所有內容的背景顏色。如果我嘗試改變背景顏色，它會溢出廣場。請參閱：http://jsfiddle.net/5hzv3/9/ – JROB

建設關費利佩Miosso的例子，我想通了，如何做到這一點最低限度，並且仍然使用官方圖標：

<style> 
    .fa-stack  .fa     { color: #000000; } 
    .fa-stack  .fa.fa-square   { color: #FFFFFF; } 
    .fa-stack:hover .fa.fa-facebook-square { color: #3B5998; } 
</style> 
<span class="fa-stack"> 
    <i class="fa fa-square fa-stack-1x"></i> 
    <i class="fa fa-facebook-square fa-stack-1x"></i> 
</span>

http://jsfiddle.net/5hzv3/27/

來源

2014-02-09 19:38:54 RonFarage

如何更改懸停的fontawesome圖標背景？ jsfiddle

回答

相關問題