CSS圖標懸停創建一個框

-1

我目前有一個圖標標記，我試圖爲圖標設置:hover的樣式。它是從font-awesome庫。我的CSS非常簡單。CSS圖標懸停創建一個框

i:hover { 
    background-color: white; 
    box-sizing: border-box; 
}

當我將鼠標懸停在圖標我的，我想只有圖標本身具有懸停效果，而不是在我的圖標包圍盒。我怎樣才能做到這一點？

來源

2017-09-27 Devologist

這不是你問很清楚的。你想在懸停時將圖標本身變成白色嗎？如果是這樣，請嘗試'顏色：白色'。 – IronWaffleMan

您可以創建一個工作代碼片段或JSFiddle並將其添加到您的問題中嗎？ – fubar

您需要指定圖標的類，而不是'i'標籤。例如，'.fa-flag：hover {color：white; }' –

試試這個

i{ 
 
color:yellow; 
 
font-size:22px; 
 
} 
 
a:hover .fa-google{ 
 
color:red; 
 
} 
 
.fa-facebook-square:hover{ 
 
color:blue; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
If its inside an element 
 

 
<br> 
 
<a href="#"><i class="fa fa-google"></i> Hover Here</a> 
 
<br> 
 
Without another element 
 
<br> 
 
<i class="fa fa-facebook-square"></i>&nbsp;Hover the Icon

來源

2017-09-27 02:59:44

CSS圖標懸停創建一個框

回答

相關問題