求助：:hover伪类修改列表项background-color失效，color可正常修改

问题原因 #

你给.nav li设置的background: linear-gradient(...)是CSS简写属性，它会同时定义background-color、background-image等多个背景相关属性。当你在:hover伪类里仅设置background-color: black时，它的优先级低于原元素的background简写属性，渐变背景会直接覆盖黑色背景色，导致看不到效果；而color属性无冲突，因此能正常生效。

修复方案 #

方案1：用background直接覆盖（推荐） #

将:hover中的background-color替换为background，完全覆盖原有渐变背景：

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

方案2：显式清除背景图片 #

如果想保留background-color写法，可同时将背景图片设为none，移除渐变：

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

方案3：使用!important（不推荐） #

强制提升优先级，但会破坏CSS层叠规则，增加后续维护成本：

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

完整代码示例 #

修改后的CSS：

.nav li {
  display: inline-block;
  height: 100%;
  padding: 0px 35px;
  border-width: 0 1px 1px 0px;
  border-color: white;
  border-style: solid;
  box-sizing: border-box;
  line-height: 37px;
  background: linear-gradient(rgb(81, 59, 192) 26%, rgb(183, 172, 237))
}

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

HTML保持不变：

<ul class="nav">
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>dolor</li>
  <li>amet</li>
</ul>

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