У меня есть изображение и список, содержащий изображения. Я хочу, чтобы при первом наведении курсора на первое изображение появился список, как я могу это сделать с помощью 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>
-1
stephjhonny 28 Май 2017 в 00:27

2 ответа

Лучший ответ

Вы ищете родного селектора. В этом случае вы можете использовать либо соседний селектор брата (+), либо общий селектор брата (~).

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>
1
Michael Coker 27 Май 2017 в 21:29

Вы должны использовать селектор брата здесь + или ~

ul{
display: none
}

.hoveroverme:hover ~ ul{
display:block
}

+ выберет только первый элемент, которому непосредственно предшествует предыдущий селектор.

~ селектор всех братьев и сестер, которым предшествовал прежний селектор.

1
vijayscode 27 Май 2017 в 21:30