單擊引導下拉時更改字體真棒圖標

Question

我在引導下拉的標題中有一個字體真棒圖標。當我點擊下拉菜單時，背景顏色變爲綠色，文字顏色變爲灰暗陰影。我的問題是，fa-icon也不會改變顏色，因爲它具有相同的綠色調，所以它變得「不可見」。如何在按下下拉菜單時更改鏈接和fa-icon的顏色？ 到問題的網站的鏈接是：www.jojogames.de/TwoScopes/index.html

在此先感謝。

Answer 1

要更改懸停時的顏色.faicon，請將父母.dropdown:hover與.faicon作爲孩子。至於不可見的圖標，請在.dropdown.open打開時指定下拉菜單。當然，紅色和紫色是佔位符顏色，將被替換。

<li class="dropdown><a href="#">Team <i class="fa fa-users faicon"></i></a></li> 

CSS

.faicon { 
    color: #30D31C; 
} 
.dropdown:hover .faicon, 
.dropdown.open .dropdown-toggle:hover .faicon { 
    color: red; 
} 
.dropdown.open .faicon { 
    color: purple; 
}