Hover pseudo selector not working as expected

Question

I have a list item with an anchor tag inside.

I want to add the hover pseudo selector to a list item and therefore the anchor tag inside it.

My goal is to change the colour of the anchor tag text when hovering over the list item.

li:hover{
    background-color: #000;
    color:#fff;
    width: 60px;
    color:#fff;
}

<li>
    <a href="#">one</a>
</li>

JSFIDDLE

It dosn't seem to work though, what am I doing wrong here?

Answer 1

The selector that you're looking for is

li:hover a {
  /* hover color here */
}

DEMO

a {
  color: green;
}
li:hover a {
  color: red;
}

<ul>

  <li>
    <a href="#">one</a>
  </li>
  <li>
    <a href="#">two</a>
  </li>
  <li>
    <a href="#">three</a>
  </li>
  <li>
    <a href="#">four</a>
  </li>
  <li>
    <a href="#">five</a>
  </li>

</ul>