使 :悬停应用于填充以及主要内容区域

Question

我正在改编WordPress主题的一些代码。我已经成功地修改了导航菜单以触发 :hover 上的 CSS 翻转，但我遇到了一个奇怪的问题：悬停似乎只正确应用于元素的主要区域 - 滚动填充内的任何内容都会按预期更改为黑色background-color白色，color更改为白色， 但是翻过填充物本身只会触发background-color，而color仍然是黑色的。

如何更改它，以便通过滚动其主区域或填充来触发每个菜单项的翻转？

导航菜单包含在如下所示的内容中：

<nav id="site-navigation" class="main-navigation">
  <ul id="primary-menu" class="primary-menu">
    <li><a href="http://localhost/wordpress/home">Home</a></li>
    <li><a href="http://localhost/wordpress/about/">About</a></li>
    <li><a href="http://localhost/wordpress/services/">Services</a></li>
    <li><a href="http://localhost/wordpress/people/">People</a></li>
    <li><a href="http://localhost/wordpress/mission/">Mission</a></li>
    <li><a href="http://localhost/wordpress/donate/">Donate</a></li>
    <li><a href="http://localhost/wordpress/contact/">Contact</a></li>
  </ul>
</nav>

以下是适用于它的 CSS：

.primary-menu>li {
  font-size: 18px;
  font-weight: bold;
  display: inline-block; 
  vertical-align: middle;
  overflow: hidden;
}
.primary-menu>li a {
  padding: 6px 8px 6px 8px;
}
.primary-menu .current-menu-item {
  background-color: #000;
  color: #FFF;
}
.primary-menu>li:hover, .primary-menu>li:focus, .primary-menu>li:active {                       
  background-color: #000;
  color: #FFF;
}

Answer 1

我认为

这可能是您正在寻找的解决方案。

将伪类的规则更改为：

.primary-menu>li:hover a,
.primary-menu>li:focus a,
.primary-menu>li:active a {
  background-color: #000;
  color: #fff;
}

它表示，当列表项悬停在上时，更改超链接的背景颜色和文本颜色，而不是列表项。