鼠标悬停p1元素时h1元素未正常显示的技术求助

核心问题：选择器匹配逻辑错误 #

你用的p1:hover + h1是相邻兄弟选择器，它只能选中紧跟在目标元素之后的第一个同级元素，但你的HTML里<h1>在<p1>前面，这就导致这个选择器根本找不到对应的h1元素，自然不会生效。

另外补充：<p1>不是HTML标准标签，虽然浏览器能勉强解析，但建议换成标准标签（比如<span class="p1">），避免后续出现兼容性或语义化问题。

解决方案一：调整HTML结构（纯CSS实现） #

把<h1>移到<p1>后面，让相邻兄弟选择器能正常匹配：

修改后的CSS

h1 {
  background-color: blueviolet;
  color: white;
  width: 250px;
  border: 2px solid black;
  padding-top: 20px;
  padding-bottom: 20px;
  display: none;
}

p {
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
}

.p1 {
  color: blueviolet;
}

.p1:hover + h1 {
  display: block;
}

修改后的HTML

<p><strong>Mouse over the text "Show Welcome" and the welcome message is displayed. Mouse out and the welcome messages disappears!</strong></p>
<span class="p1">Show Welcome</span>
<h1>Welcome to IT202</h1>

解决方案二：不调整结构，用JavaScript实现 #

如果不能改动HTML结构，就通过JS监听鼠标事件控制h1的显示隐藏：

HTML（保留原结构，替换p1为标准标签）

<h1>Welcome to IT202</h1>
<p><strong>Mouse over the text "Show Welcome" and the welcome message is displayed. Mouse out and the welcome messages disappears!</strong></p>
<span class="p1">Show Welcome</span>

CSS

h1 {
  background-color: blueviolet;
  color: white;
  width: 250px;
  border: 2px solid black;
  padding-top: 20px;
  padding-bottom: 20px;
  display: none;
}

p {
  font-family: "Times New Roman", Times, serif;
  font-size: 20px;
}

.p1 {
  color: blueviolet;
}

JavaScript

const p1El = document.querySelector('.p1');
const h1El = document.querySelector('h1');

p1El.addEventListener('mouseover', () => {
  h1El.style.display = 'block';
});

p1El.addEventListener('mouseout', () => {
  h1El.style.display = 'none';
});

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