导航栏列表项Hover时字体颜色异常问题求助

问题说明 #

设置导航栏样式时遇到以下问题：

• 期望效果：默认状态下导航栏背景黄色、文字黑色；鼠标悬停列表项（li）时，li背景变为黑色，内部链接文字保持黄色
• 实际问题：鼠标处于li元素范围内但离开a标签文字区域时，a标签文字变回黑色，出现黑底黑字的异常（比如鼠标移至下拉菜单列表项时，下拉标题“MORE”会变黑）

原代码 #

CSS代码 #

.nav {
  background-color: yellow;
}

.nav a {
  color: black;
}

.nav a:hover {
  color: yellow;
}

.nav li:hover {
  background-color: black;
}


/* DROPDOWN MENU */

.dropdown-content {
  background-color: yellow;
  display: none;
  position: absolute;
  min-width: auto;
}

.dropdown:hover .dropdown-content {
  display: block;
}

HTML代码 #

<nav class="navbar">
  <ul class="nav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">CONTACT</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown">MORE</a>
      <ul class="dropdown-content">
        <li><a href="discography">DISCOGRAPHY</a></li>
        <li><a href="gallery">GALLERY</a></li>
        <li><a href="videos">VIDEOS</a></li>
      </ul>
    </li>
  </ul>
</nav>

此前尝试给.nav li:hover设置color: yellow !important无效，原因是a标签的color样式优先级高于li，且li的color属性不会继承给a标签。

修复方案 #

修改CSS规则，通过li的hover状态控制内部所有a标签的颜色，替换原有的.nav a:hover规则即可解决问题：

.nav {
  background-color: yellow;
}

.nav a {
  color: black;
}

/* 关键修改：只要li处于悬停状态，内部所有a标签都显示黄色 */
.nav li:hover a {
  color: yellow;
}

.nav li:hover {
  background-color: black;
}


/* DROPDOWN MENU */

.dropdown-content {
  background-color: yellow;
  display: none;
  position: absolute;
  min-width: auto;
}

.dropdown:hover .dropdown-content {
  display: block;
}

原理说明 #

原代码中.nav a:hover仅在鼠标直接悬停在a标签上时生效，当鼠标处于li的其他区域（比如li的内边距）或下拉菜单展开时，li处于hover状态但a标签未触发hover，因此a会回到默认黑色。通过.nav li:hover a规则，只要li处于hover状态，内部的a标签就会强制保持黄色，完全匹配需求。

内容的提问来源于stack exchange，提问作者pineapple