爲什麼在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>

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>