制作:悬停适用于填充物以及主要内容区域。

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

它说，当一个列表项目被悬停时，改变超链接的背景颜色和文本颜色，而不是列表项目。