Change text color when hovered over li

Question

I want to change the text color of links when an <li> element is hovered over. Right now I have

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

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

However, this only changes the text color when the link itself is hovered over. If the mouse is slightly to the right of the link, the background changes but the text does not. I'd like it so that the mouse being to the right of the link is functionally the same as it being on the link itself. Is there a way to have the text color change when the background does?

Solution 1

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.

Solution 2

Easy!

#nav li a {
  color: white;
}

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

Solution 3

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/

Comments

[dayid]

I believe your question has already been answered here.

[Daniel Rosenthal]

Wow. Nice use of CSS I didn't know about (I'm a total noob).

[Sikshya Maharjan]

Well, I hope I've helped! And don't worry, we all started learning somewhere. And most of us, me included, are still learning... =)

[Ian]

@DavidThomas Not most... all :)

[Vikram Gupta]

li:hover a { color: inherit; } worked for me! Thanks!

[Mycodingproject]

Actually, when you are giving your padding, try not to give it to li element but give it to anchor element to avoid this kind of confusion. Of course, do not forget to apply display: block property to the anchor element.