Question

我有以下图标：

.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图标，但是当我使用此代码时，它只会更改轮廓颜色

Answer 1

使用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

Answer 2

您不需要图标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>

字体真棒悬停在颜色fa-star

2 个答案: