为什么在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>