当鼠标悬停时更改font-awesome图标颜色

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>

我需要解决这个问题的方案。

- jeeva

Answer 1

您使用内联样式意味着您必须使用!important来覆盖black的默认状态：

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>

- Turnip

Answer 2

我建议删除内联的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>

- Theodore K.