为什么css中的选择器'+'不适用于图像?

时间:2015-12-17 21:40:27

标签: css

所以我有一个非常基本的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>

3 个答案:

答案 0 :(得分:8)

+相邻的兄弟选择器。您的规则适用于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>

答案 1 :(得分:1)

你的选择器需要一些工作。 +表示紧随其后的兄弟

#hoverMe:hover + p + .image 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>

答案 2 :(得分:1)

的变化:

#hoverMe:hover ~ div,

.image { display:none; transition:0.5s; }

  • 由于img中有div.image

  • 你应该定位div.image因为它是兄弟姐妹,

  • 但请使用~代替+,因为div.image不在#hoverMe旁边,

  • 当兄弟姐妹就在+旁边,#hoverMe

  • 时使用<p>

&#13;
&#13;
#hoverMe:hover ~ div, #hoverMe:hover + p {
  background-color:red;
  display:block;
}
.image {
  display:none;
  transition:0.5s;
}
&#13;
<button id="hoverMe">HOVER ME</button>
<p>Test</p>          
<div class="image">
  <img src="http://www.placehold.it/350x200" id="image2">
</div>
&#13;
&#13;
&#13;