字體真棒懸停改變

我有以下圖標：字體真棒懸停改變

.fa-star-o:hover { 
 
    color: black; 
 
}

<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet" /> 
 
<i class="fa fa-star-o fa-2x"></i>

而且我想的圖標，其內部顏色改爲黑色，當我與懸停它鼠標，就像fa-star圖標，但是當我使用此代碼時，它只會更改輪廓顏色。

來源

2017-04-02 Rafael Duarte

使用stacked icons：

.fa-star{ 
 
    color: white /* your background color */ 
 
} 
 

 
.fa-stack:hover .fa-star{ 
 
    color: black; 
 
}

<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/> 
 
<span class="fa-stack fa-lg"> 
 
    <i class="fa fa-star fa-stack-2x"></i> 
 
    <i class="fa fa-star-o fa-stack-2x"></i> 
 
</span>

JSFiddle

來源

2017-04-02 22:56:40 Vucko

而且我會怎麼做，如果我想在默認情況下使用FA-明星裏面黑色的，當我將鼠標懸停它，裏面的顏色變白？ –

@RafaelDuarte [只是改變顏色]（http://jsfiddle.net/6s6p6x04/2/）。 – Vucko

如果你試圖做到這一點，它只會改變fa-star的輪廓顏色，將它與背景對比看不見（白色白色） –

你不需要的圖標fa-star-o。僅使用fa-star：

.fa-star:hover { 
 
    color: black; 
 
    cursor:pointer 
 
} 
 
.fa-star { 
 
    color:white; 
 
    transition:color 0.5s 
 
} 
 
body { 
 
    background-color:red !important; 
 
}

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css"> 
 
<link rel="stylesheet" href="http://fontawesome.io/assets/css/site.css"> 
 

 
<div style="font-size: 24px; line-height: 1.5em;" id="parent"> 
 
    <div style="font-size: 24px; line-height: 1.5em;"> 
 
     <i class="fa fa-star" aria-hidden="true"></i> 
 
    </div> 
 
</div>

來源

2017-04-02 22:59:01 repzero

OP只想改變圖標的內部顏色，使_outline_不變。 – Vucko

字體真棒懸停改變

回答

相關問題