锚点hover交互需求：hover某锚点时其余锚点变色

嘿，这个需求用纯CSS就能完美实现，不用写JavaScript，简单又高效！我给你拆解一下实现思路和代码：

核心思路 #

把所有锚点放在同一个父容器里，利用CSS的父容器hover状态 + 子元素优先级覆盖来实现：

1. 给父容器设置hover状态，让里面所有锚点统一变色
2. 单独给当前hover的锚点设置样式，覆盖父容器hover时的颜色，保持它原本的样式（或者改成你想要的高亮色）

完整代码示例 #

HTML结构

<!-- 把所有锚点放在同一个容器内 -->
<div class="link-group">
  <a href="#" class="anchor">Link 1</a>
  <a href="#" class="anchor">Link 2</a>
  <a href="#" class="anchor">Link 3</a>
</div>

CSS样式

/* 默认锚点样式 */
.anchor {
  color: #2d3748; /* 初始文字颜色 */
  text-decoration: none;
  margin: 0 15px;
  transition: color 0.3s ease; /* 加个过渡动画，颜色变化更丝滑 */
}

/* 当父容器被hover时，所有锚点统一变色 */
.link-group:hover .anchor {
  color: #a0aec0; /* 其他锚点hover时的颜色 */
}

/* 恢复当前hover的锚点颜色（优先级更高，会覆盖上面的规则） */
.link-group .anchor:hover {
  color: #2b6cb0; /* 当前锚点hover时的高亮色，也可以用默认色 */
}

效果说明 #

• 当鼠标悬停在任意一个锚点上时，其他所有锚点会变成#a0aec0（浅灰）
• 当前被hover的锚点会保持#2b6cb0（蓝色高亮），和其他锚点形成区分
• 加了transition属性，颜色变化会有0.3秒的平滑过渡，体验更好

如果需要调整颜色或者间距，直接修改对应的CSS值就行啦～

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