我在输入文本框中有图标。当鼠标悬停在我想要的图标上时 更改图标的颜色。我试过了,但那行不通。
在我的代码下面。
<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>
我需要解决这个问题。
最佳答案
您使用内联样式意味着您必须使用 !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>
关于html - 鼠标悬停时更改字体超棒的图标颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40176105/