导航栏<li>hover时SVG与<a>标签变色失效问题求助

为什么原代码不生效？ #

• 你的<svg>元素直接设置了fill: #fefefe，这个属性不会继承父元素的color值，所以<li> hover时的color: red对它完全没有作用。
• 你的<a>标签也直接指定了color: #fefefe，这个样式的优先级高于从父元素<li>继承来的color，所以<li> hover时的红色也不会覆盖它的颜色。

修复方案 #

我们可以利用currentColor关键字让SVG和文本颜色同步继承父元素的颜色，再针对<li>的hover状态修改父元素的color，这样内部元素会自动同步变化：

修改后的CSS代码：

#nav-bar .nav-links {
  display: flex;
}

#nav-bar .nav-links li {
  display: flex;
  align-items: center;
  padding: 8px;
  margin-left: 30px;
  /* 给li设置默认颜色，让内部元素继承 */
  color: #fefefe;
  cursor: pointer; /* 可选，提升交互体验 */
}

/* hover时修改li的颜色，内部元素会自动同步 */
#nav-bar .nav-links li:hover {
  color: red;
}

#nav-bar .nav-links svg {
  height: 18px;
  width: 18px;
  /* 使用currentColor继承父元素的color值 */
  fill: currentColor;
}

#nav-bar .nav-links li a {
  /* 同样用currentColor继承父元素颜色，无需单独写#fefefe */
  color: currentColor;
  font-size: 14.5px;
  margin-left: 8px;
  text-decoration: none; /* 可选，根据设计需求调整是否保留下划线 */
}

原理说明 #

• currentColor是CSS的特殊关键字，它会取当前元素的color属性值；如果元素自身没设置color，就继承父元素的color。
• 这样当<li> hover时，只需要修改<li>的color，内部的<svg>（通过fill: currentColor）和<a>（通过color: currentColor）会自动同步这个颜色，不需要分别给每个子元素编写hover样式。

内容的提问来源于stack exchange，提问作者Berk Bıçakcı