Почему селектор «+» в 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

The + это селектор смежно родственный. Ваше правило работает над элементом 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>

Answer 2

Вы Селектор необходимы некоторые работы. + соответствует родственный тот, что сразу следует.

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

Answer 3

Изменения:

#hoverMe:hover ~ div,

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

• Поскольку у вас есть img в div.image,

• вы должны быть нацелены на div.image, так как это родной брат,

• но использовать ~ вместо +, потому что div.image не рядом с #hoverMe,

• использование + когда брат находится рядом до #hoverMe, как <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>