如何在hover导航栏元素时改变当前激活项的透明度 | CSS

这问题其实是CSS选择器的作用范围限制——你当前的代码只能控制被hover的单个链接，没法影响已经激活的home项。咱们可以借助父容器的hover状态来实现你要的效果，调整后的CSS代码如下：

/* 确保active项的样式优先级足够，避免被其他样式覆盖 */
.nav_links li a.active {
  opacity: 100%;
}

/* 所有导航链接的基础样式，统一过渡效果 */
.nav_links li a {
  transition: opacity 0.3s ease;
  color: rgb(185, 209, 255);
  opacity: 55%;
}

/* 当鼠标进入导航栏区域时，把激活的home项透明度调低 */
.nav_links:hover li a.active {
  opacity: 55%;
}

/* 鼠标悬停的链接始终保持100%透明度 */
.nav_links li a:hover {
  opacity: 100%;
}

原理说明： #

• 初始状态：激活的home项保持100%透明度，其他链接默认55%；
• hover非激活项（如projects/about）：.nav_links:hover触发，让home项透明度降到55%，同时被hover的链接会被:hover选择器选中，保持100%；
• hover激活项（home）：.nav_links li a:hover会覆盖.nav_links:hover li a.active的样式，home仍保持100%，符合预期；
• 鼠标离开导航栏：所有样式自动回到初始状态。

另外我把过渡效果统一放在基础样式里了，不用重复写在:hover规则中，代码更简洁。

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