悬停伪选择器未按预期工作

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>