字体真棒悬停改变

我有以下图标：字体真棒悬停改变

.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

字体真棒悬停改变

回答

相关问题