求助：纯CSS实现图片与对应Div绑定显示失效问题

首先，咱们先梳理下你现有代码的几个核心问题：

• 选择器书写错误：.aa:hover + a里的a是匹配<a>标签，但你的目标是class为a的div，正确写法应该是.aa:hover + .a；
• 相邻兄弟选择器+的局限性：它只能选中紧接在当前元素之后的第一个同层级元素，但你的结构里.aa后面是.bb图片，不是.adiv，所以就算选择器写对了，hover效果也无法触发；
• 触发逻辑不符：你需要的是点击触发，但:hover仅对应鼠标悬停状态，纯CSS没有原生的点击状态，得借助表单元素的:checked伪类来实现。

下面是可行的纯CSS解决方案：

调整后的HTML结构 #

我们给每个图片搭配一个隐藏的checkbox，用<label>绑定checkbox（点击label内的图片就相当于点击checkbox），以此触发checked状态：

<!-- 每个图片对应一个隐藏的checkbox -->
<input type="checkbox" id="toggle-a" class="toggle-checkbox">
<label for="toggle-a">
  <img src="" alt="" class="aa">
</label>

<input type="checkbox" id="toggle-b" class="toggle-checkbox">
<label for="toggle-b">
  <img src="" alt="" class="bb">
</label>

<input type="checkbox" id="toggle-c" class="toggle-checkbox">
<label for="toggle-c">
  <img src="" alt="" class="cc">
</label>

<input type="checkbox" id="toggle-d" class="toggle-checkbox">
<label for="toggle-d">
  <img src="" alt="" class="dd">
</label>

<!-- 对应的内容div -->
<div class="content a">text</div>
<div class="content b">text</div>
<div class="content c">text</div>
<div class="content d">text</div>

对应的CSS代码 #

/* 隐藏checkbox，只保留其状态功能 */
.toggle-checkbox {
  display: none;
}

/* 默认隐藏所有内容div */
.content {
  display: none;
}

/* 当checkbox被选中时，显示对应的内容div */
#toggle-a:checked ~ .a {
  display: block;
}

#toggle-b:checked ~ .b {
  display: block;
}

#toggle-c:checked ~ .c {
  display: block;
}

#toggle-d:checked ~ .d {
  display: block;
}

额外优化（可选） #

如果需要点击其他图片时自动关闭当前打开的div，可以把checkbox改成radio，并给它们设置相同的name属性，这样同一时间只能有一个radio处于选中状态：

<input type="radio" name="content-toggle" id="toggle-a" class="toggle-checkbox">
<input type="radio" name="content-toggle" id="toggle-b" class="toggle-checkbox">
<!-- 其余radio同理 -->

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