懸停在另一個圖像上時顯示圖像

Question

我有一個圖像和一個包含圖像的列表，我想做的是，當我將鼠標懸停在列表出現的第一個圖像上時，如何使用CSS做到這一點？ 這是我的代碼：

 ul{ display: none } .hoveroverme:hover{ ul{ display:block } } 

 <img src="http://placehold.it/350x150" class="hoveroverme"> <ul class="list-inline list-unstyled"> <li><img src="http://placehold.it/50x50"></li> <li><img src="http://placehold.it/50x50"></li> <li><img src="http://placehold.it/50x50"></li> </ul> 

Answer 1

您正在尋找同級選擇器。 在這種情況下，您可以使用相鄰的兄弟選擇器（ + ）或常規兄弟選擇器（ ~ ）。

 ul { display: none } .hoveroverme:hover + ul { display: block } 

 <img src="http://placehold.it/350x150" class="hoveroverme"> <ul class="list-inline list-unstyled"> <li><img src="http://placehold.it/50x50"></li> <li><img src="http://placehold.it/50x50"></li> <li><img src="http://placehold.it/50x50"></li> </ul> 

Answer 2

您應在此處+或~使用同級選擇器

ul{
display: none
}

.hoveroverme:hover ~ ul{
display:block
}

+將僅選擇前一個選擇器之后緊跟的第一個元素。

~選擇器前面所有選擇器前面的所有同級項。