How to change anchor text color when hover?

Question

I have navigation where right side i am displaying logged in user name in below list item, when first time page loads it set to background-color #857363 and text set to #fff , now when i hover over i can not see the text because visited links are set to white.

How can i target just below anchor tag and make text color black when its hover,visited and active ?

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

There is a problem with your selector. Actually you have to use multiple selector at this context.

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

Your selector li.kendoMenuBorder a:visited a:hover is wrong as it will set to change color when anchor inside :visited anchor hovered.

Answer 2

Your problem is related to using !important attribute everywhere. I think this can be solved by changing priorities within CSS by assigning an id to

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

section instead of keeping it as a class.

!important overrides everything, you should avoid using it.