html - 悬停效果不改变 anchor 链接的颜色

Question

我有一个菜单，应该在将鼠标悬停在 li 上时更改 anchor 链接的颜色，但问题是悬停效果仅在我将鼠标悬停在 anchor 链接上时才有效。

<div style="background-color:#FFFFFF" id="menu" class="menu">
  <ul class="links">

    <li><a href="news-265.html" class="active">News &amp; Views</a> » </li>

    <li><a href="facts-269.html">Quick Facts </a>  </li>

    <li><a href="media-releases-268.html">Media Releases</a>  </li>

    <li><a href="gallery-270.html">Photo Gallery</a>  </li>

    <li><a href="social-media-271.html">Social Media Channels</a>  </li>

    <li><a href="contacts-272.html">Media Contacts </a>  </li>
  </ul>
</div>


body {
  font-family: 'Raleway', sans-serif;
}

#menu a {
  color:#76b900;
}

#menu li:hover {
  background:#76b900;
  color:#FFFFFF;
  text-decoration:none;
}

#menu a:hover {
  background:#76b900;
  color:#FFFFFF;
  text-decoration:none;
}

#menu li {
  padding: 12px 0 13px 10px; 
  border-bottom: none;  
}

这是一个link到我的 JSBin。

Answer 1

您可以取消悬停在列表元素上，将 anchor 显示更改为 block ，然后只悬停 anchor 。

HERE是一把 fiddle 。

然后您可以使用 anchor 的 css 来获取 block 的大小。

#menu a {
  display: block;
  color:#76b900;
  width: 200px;
  text-decoration: none;
}