如何在Hover/Focus单个链接时修改其余链接的HTML CSS样式？

阿华AIGC实验室

2026-5-20

解决Hover/Focus单个链接时修改其他链接样式的问题

嘿，我完全懂你遇到的这个坑！一开始我也以为直接用兄弟选择器就能搞定，结果发现根本不生效——毕竟CSS里的兄弟选择器只能选“之后的”元素，没法一次性选中所有未被hover的兄弟。不过咱们换个思路，用父容器做“中介”就能轻松实现需求！

核心思路

把所有链接放在一个统一的容器里，当其中任意一个链接被Hover/Focus时：

先让容器内所有链接都变成你想要的“未被选中”样式
再单独把当前被Hover/Focus的链接恢复成原样式（或者高亮样式）

这样一正一反，就达到了“其他链接变样式，当前链接不变/高亮”的效果。

方案1：用`:has()`选择器（精准生效，推荐）

:has()是CSS新出的选择器，能直接检测容器内是否有符合条件的元素，兼容性现在已经很不错了（除了旧版Firefox，不过大部分场景都够用）。

HTML结构

<div class="link-container">
  <a href="#" class="nav-link">首页</a>
  <a href="#" class="nav-link">博客</a>
  <a href="#" class="nav-link">项目作品集</a>
  <a href="#" class="nav-link">关于我</a>
</div>

CSS代码

/* 先给容器和链接加基础样式 */
.link-container {
  display: flex;
  gap: 1.5rem;
  padding: 1.2rem;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.nav-link {
  color: #2d3748;
  text-decoration: none;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  transition: all 0.3s ease; /* 加过渡动画更丝滑 */
}

/* 核心逻辑：当容器内有链接被hover/focus时，所有链接变浅灰半透明 */
.link-container:has(.nav-link:hover, .nav-link:focus) .nav-link {
  color: #718096;
  opacity: 0.6;
}

/* 单独还原被hover/focus的链接样式 */
.nav-link:hover,
.nav-link:focus {
  color: #2b6cb0;
  opacity: 1;
  font-weight: 600;
  background-color: #ebf8ff;
}

方案2：用容器的Hover状态（兼容旧浏览器）

如果需要兼容不支持:has()的旧版浏览器，可以利用“hover容器”的特性——当你hover容器内的链接时，容器本身也会处于hover状态（前提是容器没有多余空白区域，或者你不在意空白处hover的情况）。

CSS代码替换核心部分

/* 容器hover时，所有链接变样式 */
.link-container:hover .nav-link {
  color: #718096;
  opacity: 0.6;
}

/* 单独还原被hover/focus的链接样式 */
.nav-link:hover,
.nav-link:focus {
  color: #2b6cb0;
  opacity: 1;
  font-weight: 600;
  background-color: #ebf8ff;
}