how do I make HTML links show hover style?

Question

I have some HTML markup in my ASP.NET master page representing a basic navigation menu. THree words that link to three pages. My CSS and HTML are included below for your reference.

When I load the page, the links appear with the correct color (red). If I hover over a link, the link changes to the correct color (blue). So far, we're good. Clicking a link changes the link color to the correct color (yellow). The two remaining links are still red / blue as expected. Clicking a second link changes that link to yellow also. Now I have two yellow links. Neither yellow link displays the hover color (blue) like I'd prefer. Clicking the third link causes it to be yellow, too and none of the links display the hover style.

Although a link has been clicked, I'd like the color to be stored and have the hover color displayed. How do I accomplish this? This is an ASP.NET web application project but I'm only using straight HTML at this point.

/* --- css --- */

a:link
{
    color: red;
    text-decoration: none;
}

a:hover
{
    color: blue;
    text-decoration: none;
}

a:active
{
    color: green;
    text-decoration: none;
}

a:visited
{
    color: yellow;
    text-decoration: none;
}



/* --- HTML --- */

<p class="MenuItems">
    <a href="1.aspx">Cars. </a>
    <a href="2.aspx">Trucks. </a>
    <a href="3.aspx">Vans. </a>
</p>

Answer 1

Your

a:hover

declaration must come after your

a:visited

declaration in the stylesheet because the visited state is currently taking priority. Always put hover at the end of the a styles declaration block to prevent this.

a:link -> a:visited -> a:active -> a:hover is the optimal ordering.

Answer 2

As described here, the :hover declaration must come AFTER the :visited and :active declarations.

Basically, in the cascade of your current styles, you won't ever see the :hover color.

Answer 3

Just use this:

a:hover
{
    color: blue ! important;
    text-decoration: none ! important;
}

or as described - use this order:

a:link
{
    color: red;
    text-decoration: none;
}

a:active
{
    color: green;
    text-decoration: none;
}

a:visited
{
    color: yellow;
    text-decoration: none;
}

a:hover
{
    color: blue;
    text-decoration: none;
}