マウスオーバー時にフォントのすごいアイコンの色を変更

Question

入力テキストボックス内にアイコンがあります。アイコンの上にマウスを置くと、私は アイコンの色を変えたいと思っていましたが、それはうまくいかないでしょう。

以下、私のコードです。

<div class="row"> 
     <span class="fa fa-envelope" style="position: absolute; top: 10px; left: -5px; color: black"></span> 
     <span class="fa fa-file" style="position: absolute; top: 10px; left: 20px; color: black"></span> 
     <span class="fa fa-calendar" style="position: absolute; top: 10px; left: 42px; color: black"></span> 
     <span class="fa fa-bar-chart" style="position: absolute; top: 10px; left: 65px; color: black"></span> 
     <input id="Text1" class="col-md-8" type="text" placeholder="Send Message" style="padding: 30px; border: 1px solid #aaa /> 
    </div> 

私はその問題を解決する必要があります。

Answer 1

私はむしろインラインcolor: blackを削除してCSSスタイルに置き換えることをお勧めします。できる場合は!importantを使用しないでください。

.fa{ 
 
    color: black 
 
} 
 
.fa:hover{ 
 
    color:blue; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"/> 
 
<div class="row"> 
 
     <span class="fa fa-envelope" style="position: absolute; top: 10px; left: -5px;"></span> 
 
     <span class="fa fa-file" style="position: absolute; top: 10px; left: 20px;"></span> 
 
     <span class="fa fa-calendar" style="position: absolute; top: 10px; left: 42px;"></span> 
 
     <span class="fa fa-bar-chart" style="position: absolute; top: 10px; left: 65px;"></span> 
 
     <input id="Text1" class="col-md-8" type="text" placeholder="Send Message" style="padding: 30px; border: 1px solid #aaa /> 
 
    </div>

Answer 2

インラインスタイルのご使用はおblackのデフォルト状態をオーバーライドするために!importantを使用する必要があることを意味します

span:hover { 
 
    color: green !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="row"> 
 
     <span class="fa fa-envelope" style="position: absolute; top: 10px; left: -5px; color: black"></span> 
 
     <span class="fa fa-file" style="position: absolute; top: 10px; left: 20px; color: black"></span> 
 
     <span class="fa fa-calendar" style="position: absolute; top: 10px; left: 42px; color: black"></span> 
 
     <span class="fa fa-bar-chart" style="position: absolute; top: 10px; left: 65px; color: black"></span> 
 
     <input id="Text1" class="col-md-8" type="text" placeholder="Send Message" style="padding: 30px; border: 1px solid #aaa /> 
 
    </div>

より良い解決策は次のようになります：

を

.fa { 
 
    position: absolute; 
 
    top: 10px; 
 
    color: black; 
 
} 
 
.fa:nth-child(1) { 
 
    left: -5px; 
 
} 
 
.fa:nth-child(2) { 
 
    left: 20px; 
 
} 
 
.fa:nth-child(3) { 
 
    left: 42px; 
 
} 
 
.fa:nth-child(4) { 
 
    left: 65px; 
 
} 
 
.fa:hover { 
 
    color: green; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<div class="row"> 
 
    <span class="fa fa-envelope"></span> 
 
    <span class="fa fa-file"></span> 
 
    <span class="fa fa-calendar"></span> 
 
    <span class="fa fa-bar-chart"></span> 
 
    <input id="Text1" class="col-md-8" type="text" placeholder="Send Message" style="padding: 30px; border: 1px solid #aaa" /> 
 
</div>