如何让:hover作用于非子元素？单选按钮关联信息显示问题求助

嘿，我明白你遇到的问题了——想用:before/:after伪类来控制悬停和选中单选按钮时显示对应的信息，但因为目标元素不是当前元素的子节点，这个思路从一开始就行不通。

:before和:after伪类的核心是给当前元素生成一个虚拟的子元素（分别放在元素内容的前后），它们只能作用于当前元素本身或者它的内部，完全没办法控制同级元素的显示状态。所以你想用伪元素去触发非子元素的information显示，本质上就不符合CSS伪元素的设计逻辑，自然不会生效。

既然单选按钮和对应的information是同级关系，我们可以用**相邻兄弟选择器（+）或者通用兄弟选择器（~）**来实现需求，结合:hover和:checked伪类就能完美达成效果。

第一步：合理的HTML结构 #

首先要把单选按钮、标签（可选但更友好）和对应的信息元素放在同一层级，方便CSS选择：

<form method="post" action="#">
  <!-- 单选按钮组1 -->
  <div class="radio-item">
    <input type="radio" name="info-group" id="radio1">
    <label for="radio1">单选按钮1</label>
    <div class="information" id="information1">这是仅属于单选按钮1的信息内容</div>
  </div>

  <!-- 单选按钮组2 -->
  <div class="radio-item">
    <input type="radio" name="info-group" id="radio2">
    <label for="radio2">单选按钮2</label>
    <div class="information" id="information2">这是仅属于单选按钮2的信息内容</div>
  </div>
</form>

注意：给所有单选按钮设置相同的name属性，确保它们是互斥的单选组。

第二步：CSS实现交互逻辑 #

先默认隐藏所有information元素，然后通过:hover和:checked结合兄弟选择器控制显示：

/* 默认隐藏所有信息框 */
.information {
  display: none;
  margin: 10px 0;
  padding: 12px;
  background-color: #f0f4f8;
  border-radius: 6px;
}

/* 1. 悬停单选按钮或其标签时，显示对应信息 */
input[type="radio"]:hover ~ .information,
label:hover ~ .information {
  display: block;
}

/* 2. 单选按钮选中时，保持信息框显示（优先级比hover高，确保选中后不会因移开鼠标消失） */
input[type="radio"]:checked ~ .information {
  display: block;
}

• 当鼠标悬停在单选按钮1或它的标签上时，information1会立刻显示；
• 点击选中单选按钮1后，即使鼠标移开，information1也会保持显示；
• 当选中单选按钮2时，单选按钮1的选中状态会自动取消，information1隐藏，information2保持显示，完美符合你的需求。

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