將鼠標懸停在另一圖像上時顯示圖像

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 
} 

+只會選擇立即由前選擇後面的第一個元素。

~選擇前一個選擇器前面的所有兄弟。