How to not change color of link on hover


Tags: html,css,asp.net-mvc,microsoft-metro

Problem :

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!



Solution :

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;
}

    CSS Howto..

    How to target CSS for iPad but exclude Safari 4 desktop using a media query?

    How to style only a sub-class with .css?

    How to include CSS file in Hippo CMS?

    how to show background image(multiple) if out of current div

    How to make a text flash in html/javascript?

    How to pull all CSS rules on an element together

    How to make flash movie to scale proportunatly to div width?

    How to display code blocks with word wrap and line number with jekyll markdown on github-pages

    how to change single li element in a menu using lists?

    How to change font color inside nav element?

    How can I make the parent div draggable

    How can i select the div from CSS?

    How to customize the CSS of a theme generated with the ThemeBuilder?

    How to compress the js, css files in /public in Rails production mode

    Show another element with hover

    javafx ImageView how to use css hover

    css: how to make the third div line up with the first div

    Capybara how to check if 'li' of a given link has proper css class

    How to choose font different font-weight? use bolder one or just font-weight?

    How to make outer div inherit height of inner, non-floated divs?

    How can I center my icon horizontally and vertically?

    How to add stylesheet to toolbar

    How to remove space after a colon in CSS with Sublime Text 3?

    IBM Worklight - How to disable Native device features?

    How to dynamically add more width inside a div?

    How can I hide page elements till an AJAX call completes?

    CSS How to keep page centered, but still put stuff where I want

    How to navigate from one field to another field using Enter Key function in MVC5

    Understanding how VS parses CSS in .ascx docs

    How to change default value in counter-increment?