css - 为什么css中的选择器 '+'不适用于图片？

Question

所以我有一个非常基本的 CSS，它表示如果您将鼠标悬停在按钮上，就会显示图像。但我不明白为什么它不起作用。是否有我没有得到的规范？

#hoverMe:hover + img, #hoverMe:hover + p {
  background-color:red;
  display:block;
}
img {
  display:none;
  transition:0.5s;
}

<button id="hoverMe">HOVER ME</button>
<p>Test</p>          
<div class="image">
  <img src="http://www.placehold.it/350x200" id="image2">
</div>

Answer 1

+ 是相邻的兄弟选择器。您的规则适用于 p 元素，因为它是相邻的。 div 不相邻，img 甚至不在同一层。

相反，您可以使用通用的兄弟选择器 ~ 来获取 div，然后使用常规嵌套来选择 img:

#hoverMe:hover ~ div img, #hoverMe:hover + p {
  background-color:red;
  display:block;
}
img {
  display:none;
  transition:0.5s;
}

<button id="hoverMe">HOVER ME</button>
<p>Test</p>          
<div class="image">
  <img src="http://www.placehold.it/350x200" id="image2">
</div>