将鼠标悬停在另一个图像上时显示图像

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
}

+只会选择前一个选择器前面的第一个元素。

~选择前面的选择器前面的所有兄弟姐妹。