Q: Why does selector '+' in css does not apply to image? So I have a pretty basic CSS that say if you hover a button the image is displayed. But I don't get why it is not working. Is there a specification I don't get?


#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>



A: The + is the adjacent sibling selector. Your rule works on the p element because it's adjacent. The div isn't adjacent, and the img isn't even on the same level.
Instead you can use the general sibling selector ~ to get to the div, and then use regular nesting to select the 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>



A: You selector needed some work. + means sibling that immediately follows.


#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>



A: Changes:
#hoverMe:hover ~ div,
.image {
      display:none;
      transition:0.5s;
    }


*

*Since you have the img in a div.image, 

*you should target the div.image since it's a sibling, 

*but use ~ instead of +, because div.image is not next to #hoverMe, 

*use + when the sibling is right next to #hoverMe like the <p>


#hoverMe:hover ~ div, #hoverMe:hover + p {
  background-color:red;
  display:block;
}
.image {
  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>


