如何实现鼠标悬停链接时显示对应的Div？纯CSS解决方案求助

首先，咱们先拆解你代码里的核心问题：

• 重复ID违反规范：HTML里id是唯一标识，你三个<a>都用id="myDIV"，浏览器只会识别第一个，后面的链接完全失效。
• 兄弟选择器逻辑错误：+是相邻兄弟选择器，只能选中紧接当前元素之后的第一个兄弟元素，你写的#myDIV:hover + .hide1 + .hide2 + .hide3根本没法实现“每个链接对应显示自己的Div”的需求。

下面给你两种可行的纯CSS方案，都是基于CSS兄弟选择器的特性（只能选择当前元素之后的元素）设计的：

方案一：调整结构，链接与对应Div相邻 #

这种方案最直观，把每个链接和它对应的Div放在相邻位置，用+选择器就能精准控制：

修正后的HTML： #

<body>
  <a class="link" href="#">Test 1</a>
  <div class="hide">Test 11</div>
  
  <a class="link" href="#">Test 2</a>
  <div class="hide">Test 22</div>
  
  <a class="link" href="#">Test 3</a>
  <div class="hide">Test 33</div>
</body>

对应CSS： #

body {background: #000;}
/* 所有目标Div默认隐藏 */
.hide { 
  display: none; 
  color: red;
}
/* 悬停链接时，显示紧跟的对应Div */
.link:hover + .hide {
  display: block;
}

方案二：保留原结构（链接在前，Div在后） #

如果不想调整HTML结构，想保持三个链接集中在前、三个Div集中在后，可以用~通用兄弟选择器，配合专属类名实现精准匹配：

修正后的HTML： #

<body>
  <a class="link link-1" href="#">Test 1</a>
  <a class="link link-2" href="#">Test 2</a>
  <a class="link link-3" href="#">Test 3</a>
  
  <div class="hide hide-1">Test 11</div>
  <div class="hide hide-2">Test 22</div>
  <div class="hide hide-3">Test 33</div>
</body>

对应CSS： #

body {background: #000;}
.hide { 
  display: none; 
  color: red;
}
/* 分别匹配每个链接与对应Div */
.link-1:hover ~ .hide-1 {
  display: block;
}
.link-2:hover ~ .hide-2 {
  display: block;
}
.link-3:hover ~ .hide-3 {
  display: block;
}

这里的~选择器会选中当前元素之后所有符合条件的兄弟元素，通过专属类名就能精准定位到对应的Div了。

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