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