[英]How to change font-awesome icon color when it is active
如何在激活時更改超贊的圖標顏色,我有一個帶有超酷字體鏈接的菜單,我想在激活時更改圖標的顏色,對此有幫助嗎?
我確實讀過有關狀態的信息: https : //smacss.com/book/state,但仍無法在我的代碼中使用,這是使此工作有效的一種方法? 謝謝。
jsfiddle: https ://jsfiddle.net/oosa8yzk/
我的HTML
<ul>
<li>
<a class="menu" data-toggle="tooltip" data-placement="bottom" title="home">
<i class="fa fa-bars fa-2x" aria-hidden="true"></i>
</a>
</li>
<li>
<a class="search"><i class="fa fa-search fa-2x" aria-hidden="true"></i></a>
</li>
</ul>
我的混蛋:
ul {
list-style-type: none;
li {
padding: 10px;
border-top: 1px solid blue;
&:first-child {
border: none;
}
i {
color: black;
&:hover {
color: white;
background-color: blue;
}
}
&:hover {
background-color: blue;
color: white;
}
&:active {
background-color: yellow;
color: black;
}
&:focus {
background-color: red;
color: white;
}
}
}
我的CSS:
ul {
list-style-type: none;
}
ul li {
padding: 10px;
border-top: 1px solid blue;
}
ul li:first-child {
border: none;
}
ul li i {
color: black;
}
ul li i:hover {
color: white;
background-color: blue;
}
ul li:hover {
background-color: blue;
color: white;
}
ul li:active {
background-color: yellow;
color: black;
}
ul li:focus {
background-color: red;
color: white;
}
您可以使用以下代碼
.fa:active{
color: #your-active-color;
}
您的SCSS
li {
// active pseudo on li
&:active {
i { color: #your-active-color; }
}
a {
// active pseudo on a link
&.active {
i { color: #your-active-color; }
}
}
}
jQuery-
$(document).ready(function() {
$('li a').on('click', function() {
$('li a').removeClass('active');
$(this).addClass('active');
});
});
您可以像這樣在html中添加自定義類:
<ul>
<li>
<a class="menu" data-toggle="tooltip" data-placement="bottom" title="home">
<i class="fa fa-bars fa-2x color" aria-hidden="true"></i>
</a>
</li>
<li>
<a class="search"><i class="fa fa-search fa-2x color" aria-hidden="true"></i></a>
</li>
</ul>
然后,在CSS中,在active事件中添加一個屬性:
.color:active {
color:red;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.