web-dev-qa-db-ja.com

フォントの素晴らしいアイコンにカーソルを合わせると色が変わりますか？

Font Awesomeのベース ドキュメント このアイコンを作成します：

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>

このコードはこのhtmlを作成します：

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x">::before</i>
  <i class="fa fa-flag fa-stack-1x fa-inverse">::before</i>
</span>

積み重ねられた旗のアイコンです。ホバーイベントのアイコンの色を変更したいのですが、これらすべてを試しました：

.fa-stack:hover{
color: red
}
.fa-stack i:hover{
color: red
}
.fa-stack i before:hover{
color: red
}

しかし、動作していません。

font-awesomefont-awesome-4
25
JPashs

hoverのフラグの色のみを変更する場合は、これを使用します。

http://jsfiddle.net/uvamhedx/

.fa-flag:hover {
    color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<i class="fa fa-flag fa-3x"></i>
49
Juan Castillo

-！important-を使用して、デフォルトの黒を上書きします

.fa-heart:hover{
   color:red !important;
}
.fa-heart-o:hover{
   color:red !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<i class="fa fa-heart fa-2x"></i>
<i class="fa fa-heart-o fa-2x"></i>
0
Jifri Valanchery