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

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
}

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

~选择器前一个选择器前面的所有兄弟。