Как изменить цвет текста привязки при наведении указателя мыши?

Question

У меня есть навигация, где правая сторона я показываю имя пользователя в элементе ниже списка, когда загружается первая временная страница, она установлена ​​на background-color #857363, а текст установлен на #fff, теперь, когда я наводил курсор, я не вижу текст, потому что посещенные ссылки являются белый.

Как я могу настроить таргетинг только под ярлыком привязки и сделать цвет текста черным при его зависании, посещении и активном?

main.html

<li style="margin-right: 0;" class="nav navbar-nav navbar-right kendoMenuBorder" 
    ng-show="user.isAuthenticated"><a> 
    {{user.customUserDetails.workFullName}} </a> 
    <ul class="submenu"> 
     <li><a ui-sref="app.logout"> Logout </a></li> 
    </ul> 
</li> 

main.css

.kendoMenuBorder { 
    color:#fff !important; 
    background-color:#857363 !important; 
    text-decoration: none; 
} 

    li.kendoMenuBorder a { 
     color:#fff !important; 
    } 
    li.kendoMenuBorder a:visited a:hover { 
     color:#000000 !important; 
    } 

Answer 1

Существует проблема с селектором. В этом контексте вы должны использовать multiple selector.

li.kendoMenuBorder a:visited,li.kendoMenuBorder a:hover { 
    color:#000000 !important; 
} 

Ваш селектор li.kendoMenuBorder a:visited a:hover неправильно, как он будет установлен, чтобы изменить цвет, когда anchor внутри :visited anchor колебались.

Answer 2

Ваша проблема связана с использованием атрибута !important везде. Я думаю, что это можно решить, изменив приоритеты в CSS, присвоив идентификатор

li.kendoMenuBorder a { 
     color:#fff !important; 
    } 

раздел вместо того, чтобы хранить его как класс.

!important отменяет все, вы должны избегать его использования.