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

Question

我有一个列表项，里面有一个 anchor 标记。

我想将悬停伪选择器添加到列表项，因此将 anchor 标记添加到列表项中。

我的目标是将鼠标悬停在列表项上时更改 anchor 标记文本的颜色。

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

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

JSFIDDLE

虽然它似乎不起作用，但我在这里做错了什么？

Answer 1

您要查找的选择器是

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>