单击引导下拉列表时更改字体真棒图标

Question

我在bootstrap下拉列表的标题中有一个字体真棒图标。当我单击下拉列表时，背景颜色变为绿色，文本颜色变为深灰色。我的问题是，fa-icon也没有改变颜色，因为它具有相同的绿色调，它变得“隐形”。按下下拉列表时，如何更改链接和fa图标的颜色？ 有问题的网站链接是：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;
}