如何用CSS选择器实现hover跨兄弟容器的子元素样式控制？

云上老周

2026-6-1

纯CSS实现跨容器hover联动显示效果

核心思路

利用CSS :has() 选择器让父容器感知子元素的hover状态，从而统一控制所有容器内的对应目标元素显示/隐藏，这是目前纯CSS实现跨兄弟容器元素联动的最优方案。

完整代码

HTML（修正原代码的标签语法错误）

<div id="main">
  text that the text below goes under<br>
    
  <div class="content content-1">
    <span class="hover1">reveals style1 text when hovered</span><br>
    <span class="hover2">reveals style2 text when hovered</span><br>
    <span class="style1">words words words<br>
    words words words</span>
    <span class="style2">different words<br>
    words words words</span>
  </div>
    
  <div class="content content-2">
    <span class="hover1">reveals style1 text when hovered</span><br>
    <span class="hover2">reveals style2 text when hovered</span><br>
    <span class="style1">words words words<br>
    words words words</span>
    <span class="style2">different words<br>
    words words words</span>
  </div>
</div>

CSS

/* 基础样式：默认隐藏目标文本 */
.style1, .style2 {
  display: none;
}

/* 两个content容器的差异化样式 */
.content-1 {
  background-color: #f0f0f0;
  padding: 10px;
  margin: 10px 0;
}

.content-2 {
  background-color: #e0f0ff;
  padding: 10px;
  margin: 10px 0;
}

/* 核心联动逻辑 */
/* 当任意content内的hover1被hover时，显示所有style1 */
#main:has(.hover1:hover) .style1 {
  display: block;
}

/* 当任意content内的hover2被hover时，显示所有style2 */
#main:has(.hover2:hover) .style2 {
  display: block;
}

选择器说明

#main:has(.hover1:hover)：检测父容器#main内是否有处于hover状态的.hover1元素，只要有一个满足条件，就会触发后续样式规则。
后续的.style1会选中#main下所有的.style1元素，无论它在第一个还是第二个content容器中，直接实现跨容器的hover联动效果。