如何在CSS中实现hover单个链接时其他兄弟链接变灰？

你的核心问题是选择器逻辑错误，你写的.list-items a:hover.item:not(:hover)这类选择器不可能匹配任何元素——一个元素无法同时处于:hover和:not(:hover)状态。另外，你要操作的"兄弟链接"并非直接的DOM兄弟（它们各自被<h2>包裹），所以需要借助父容器的hover状态来实现效果。

正确的CSS代码 #

.item {
  color: black;
  transition: color 0.3s ease;
}

/* 当父容器被hover时，所有.item变为浅灰色 */
.list-items:hover .item {
  color: lightgray;
}

/* 被hover的那个.item保持黑色 */
.list-items .item:hover {
  color: black;
}

原理说明 #

• 当鼠标进入.list-items容器范围时，里面所有的.item都会变成浅灰色；
• 当鼠标精准hover到某个.item上时，该元素的:hover样式会覆盖父容器hover时的样式，保持黑色；
• 过渡效果会让颜色变化更平滑，符合你的需求。

额外注意点 #

• 确保你的Hugo模板里的<ul>确实带有class="list-items"，和CSS选择器对应（你之前的尝试里有写成list-item的错误，要避免）；
• 这个方案支持后续新增的文章，不需要修改CSS，只要保持结构一致即可。

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