Anchor element doesn't change color when hovered

Question

I have the following CSS:

.container a {
    text-decoration: none;
    font-weight: bold;
    color: rgb(23, 230, 230);
}

.container a:hover {
    text-decoration: underline;
    color: white;
}

.container a:visited {
    color: rgb(230, 0, 230);
}

And this html (piece of):

<div class="container">
    ...
    <div class="menu">
        <ul>
            <li>
                <a href="#">link1</a>
            </li>
            <li>
                <a href="#">link2</a>
            </li>
            <li>
                <a href="#">link3</a>
            </li>
        </ul>
    </div>
</div>

I don't understand why all the link options work, except for the color on hover: It does get underlined, but the color doesn't change. Does anyone know why?

score 1 · Answer 1 · edited May 23 '17 at 10:28

When dealing with pseudo-classes on anchor elements, the order matters.

They must be in this order:

a:link
a:visited
a:hover
a:active

a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective!

_{source: http://www.w3schools.com/css/css_pseudo_classes.asp}

There's a popular mnemonic you can use to remember this: LOVE HATE (lv ha).

For more details, see these references:

Not related to the question but it is a good practice to always include `:focus` in the list (before `:hover`). It is used for keyboard navigation. — tomasz86, Apr 26 '16 at 04:37

score 0 · Answer 2 · answered Apr 26 '16 at 03:01

jsfiddle link for everyone

.container a {
text-decoration: none;
font-weight: bold;
/* color: rgb(0, 230, 230); */
}

.container a:hover {
    text-decoration: underline;
    color: green;
}

/* .container a:visited {
    color: rgb(2, 0, 230);/
} */


.test {
  /* color: black; */
}

I loaded up your html and CSS into my sublime and it totally works fine. I toyed around with the colors a bit and everything is great. I loaded it up in fiddle to show you. When you have a list like you do, you want to target the list with some sort of class or ID to target them specifically. I commented some things out inside of the fiddle for you to see. enter code here

score 0 · Answer 3 · answered Apr 26 '16 at 11:40

If you're finding your css is not taking not taking effect no matter what you do, it's worth adding !important parameters to tell the browser you designate your style attribute as having precedence.

.container a {
  text-decoration:none !important;
  font-weight: bold !important;
  }
  .container a:visited {
    color: rgb(230, 0, 230) !important;
  }     
  .container a:hover {
    text-decoration:underline !important;
    color: white !important;
  }

Having said that, sometimes even with !important, still your style may be overridden. To unravel the CSS settings in the browser it's essential to use the inspector console. I think you may already be using the inspector, but if you want more info on this, please let me know.

Anchor element doesn't change color when hovered

3 Answers3