How to not change color of link on hover

Question

I am using metro-ui-css in MVC5 app and have a menu. Now I do not want to change the color of my menu link at all. The menu navbar looks as follows:

 <nav class="navigation-bar-content">
            <a href="@Url.Action("Index", "Home")"><item class="element">A Thousand Counts</item></a>
            <item class="element-divider"></item>
            <item class="element">...</item>
        </nav>

While adding the following css:

.element > a, a:active, a:hover, a:link, a:visited {
    color: white;
}

I managed to keep the color of the link white as I want it to be. Unfortunately, on hover it still turns blue. How can I change this behaviour and keep it white? I tried:

a:hover {
    color: white;
}

but it is not working. I would be grateful it someone with CSS skills could help me out!

Answer 1

In your CSS definitions, there could be other styles with more specificity that get higher priority hence overriding your defined style.

Based on your posted HTML, this will most probably do the job for you:

.navigation-bar-content a:hover {
    color: white;
}

Answer 2

Arbel's tip is great! If you get stuck on these types of issues and cannot find the culprit, sometimes workarounds like these help:

<nav class="navigation-bar-content">
    <a href="@Url.Action("Index", "Home")"><item class="element"><span class="workaround">A Thousand Counts</p></span></a>
            <item class="element-divider"></item>
            <item class="element">...</item>
        </nav>

.workaround > a, a:active, a:hover, a:link, a:visited {
    color: red;
}

Answer 3

Thanks to the comment by Arbel the problem is solved. By adding !important:

.element > a, a:active, a:hover, a:link, a:visited {
    color: white!important;
}

the menu stays white. Great!