CSS hover伪类在简单测试代码中不生效，是什么原因导致的？

你的代码存在3处疏漏：

• 伪类语法错误：:hover 是连续的伪类标识，你在冒号和hover之间加了空格，CSS会将空格识别为后代选择器分隔符，直接导致hover伪类不生效。
• 选择器匹配逻辑错误：你写的 #dropdownmenu:hover #test 是后代选择器，只会匹配button元素内部id为test的子元素，但你代码里的test是button的同级后续元素，需要用相邻兄弟选择器 + 匹配紧跟在button后的p标签。
• HTML语法错误：p标签的闭合标签写反了，你写的是 <p>，正确应为 </p>。

修正后的完整代码如下：

<!doctype html>

<button id="dropdownmenu"></button>
<p id="test"> this is a test </p>

<style>
#test{
  background-color: red;
}
#dropdownmenu{
  height:200px;
  width:200px;
}
#dropdownmenu:hover + #test{
  background-color: blue;
}
</style>

</html>

如果你的实际场景中test元素不是紧跟在button后面，中间还有其他同级元素，可以换成通用兄弟选择器 ~ 匹配button之后所有同级的test元素。

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