[英]Change font-awesome icon color when mouse over
我在輸入文本框中有圖標。 當我將鼠標懸停在圖標上時,我想更改圖標的顏色。我嘗試了一下,但是那不起作用。
在我的代碼下面。
<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>
我寧願建議刪除內聯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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.