CSS 中实现同类型兄弟元素悬停联动效果（如所有红色行同时高亮）

张开发
• 2026/4/19 23:46:56 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

CSS 中实现同类型兄弟元素悬停联动效果（如所有红色行同时高亮）
本文介绍如何利用 css :has() 伪类实现“悬停任一同类元素时所有同类型兄弟元素同步响应样式变化”无需 javascript纯 css 可控适用于分组高亮等交互场景。 本文介绍如何利用 css :has() 伪类实现“悬停任一同类元素时所有同类型兄弟元素同步响应样式变化”无需 javascript纯 css 可控适用于分组高亮等交互场景。在传统 CSS 中选择器无法向上查找父元素或横向影响其他兄弟元素——这意味着仅靠 .red-row:hover 只能改变当前被悬停的元素自身样式无法波及同组其他 .red-row 元素。但现代 CSS 提供了突破性方案:has() 伪类它允许我们基于子元素的状态例如是否被悬停来为祖先元素设置条件样式从而间接驱动其后代中所有匹配元素的样式更新。核心思路是将所有目标元素包裹于同一父容器内并在该父容器上使用 :has() 检测是否存在某类元素处于 :hover 状态一旦满足条件即对容器内所有同类元素统一应用样式。以下为完整可运行示例div classrow-group p classred-rowRed Row/p p classred-rowRed Row/p p classred-rowRed Row/p p classblue-rowBlue Row/p p classblue-rowBlue Row/p p classblue-rowBlue Row/p/div对应 CSS 如下立即学习“前端免费学习笔记深入” 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手依托大模型帮助用户记录、整理和分析音视频内容体验用大模型做音视频笔记、整理会议记录。

更多文章