Question

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

<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;  
}

这是我的JSBin的link。

Answer 1

您可以将鼠标悬停在列表元素上，将锚点显示更改为阻止，然后只悬停锚点。

HERE是一个小提琴。

然后，您可以使用锚点的css来获取块的大小。

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

Answer 2

你可以用这个

#menu li:hover > a 
{
color:#FFFFFF;
}

Answer 3

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

#menu li:hover {
  background:#76b900;
  color:#ffffff;

}

#menu li:hover a {
 color:#ffffff;
}

Answer 4

尝试使用#menu li:hover a代替#menu a:hover。

悬停效果不会改变锚链的颜色

4 个答案: