Change text color when hovered over li

Question

I want to change the text color of links when an

element is hovered over. Right now I have

#nav li a:hover {
  margin-left: -10px;
  pad         


        

Answer 1

Easy!

#nav li a {
  color: white;
}

/* When hovering over li, apply styles to child a */
#nav li:hover a {
  color: blue;
}

Answer 2

There are lots of good suggestions above, but I wanted to mention the reason why your CSS rules did not work, which is because of specificity. Each CSS selector you define has a calculated specificity, which you can read about here. http://www.w3.org/TR/css3-selectors/#specificity. Those values are used to determine which rules take precedence over others.

Note that inherited selectors have a specificity of 0, which is important in your case.

#nav ul li { color: #000; }
#nav ul li a { color: #800; }      // This has a specificity of 103 when applied to <A> elements
#nav ul li:hover { color: #080; }  // This has a specificity of 0 when applied to <A> elements because it is inherited from the parent <LI> element.

Example: http://jsfiddle.net/rg4fN/

By appending an a element to the last selector, it will no longer be inherited when applied to elements. It now has a higher specificity than the other selectors and thus will take precedence.

#nav ul li a { color: #800; }        // This has a specificity of 103 when applied to <A> elements 
#nav ul li:hover a { color: #080; }  // This has a specificity of 113 when applied to <A> elements

Example: http://jsfiddle.net/NxT29/

Answer 3

Try Something Like this

 #nav li a 
{
  margin-left: -10px;
  padding-left: 10px;
  background-color: #13118C;
  color: white; 
  font-weight: bold;
  width: 100%;

}

apply styles to child a

#nav li:hover a 
{
 margin-left: -10px;
 padding-left: 10px;
 background-color: #13118C; 
 font-weight: bold;
 width: 100%;
 color: blue;
 }

Answer 4

Then ensure that either the a inherits its colour from its parent:

li:hover a {
    color: inherit;
}

Or specify a selector to explicitly apply the same colour to the a element:

#nav ul li:hover,
#nav ul li:hover a {
  margin-left: -10px;
  padding-left: 10px;
  background-color: #13118C;
  color: white; 
  font-weight: bold;
  width: 100%;
}

You could, of course, also make the a fill the li element, using:

#nav ul li a {
    display: block;
}

If you specify a height for the li, then use that same height (with the previous display: block rule) the a will be vertically-centred within the li as well, for example:

#nav ul li {
    height: 2em; /* or whatever, adjust to taste... */
}
#nav ul li a {
    display: block;
    line-height: 2em;
}

Though the padding of the li won't be included within the specified height (it'll be the height of the element, plus the padding plus the border-width), so there'll be an empty-space around the a, unless you specify (for compliant browsers) box-sizing: border-box; to include the border and padding in the specified height.