Как сделать отображение div при ховере на другой div?

Question

[Nikita solodovnikov]

Привет всем, помогите пожалуйста решить проблему.

Мне нужно сделать отображение блока поверх другого блока при ховере.

Как должно выглядеть - joxi.ru/ZrJQQwOh9LBeLA.jpg

<div class="live_drop">
	<div class="drop" style="background: url(img/drop.png) no-repeat center;"></div>
	<div class="info_drop">
		afghrsddfgsdfghs
	</div>
	<div class="drop" style="background: url(img/drop.png) no-repeat center;"></div>
	<div class="info_drop">
		afghrsddfgsdfghs
	</div>
	<div class="drop" style="background: url(img/drop.png) no-repeat center;"></div>
	<div class="info_drop">
		afghrsddfgsdfghs
	</div>
</div>
итд...

.drop {
	margin: 0 28px 0 0; 
	height: 45px;
	width: 65px;
	border-radius: 6px;
	cursor: pointer;
	z-index: 1;
	display: relative;
	display: block;
}

.live_drop {
	margin-top: 30px; 
	height: 70px;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.info_drop {
	top: -8px;
	height: 60px;
	width: 175px;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.5);
	position: relative;
	z-index: 20;
	border: solid red 1px; 
	display: none;
}

.drop:hover > .info_drop {
	display: block;
}

У меня не получается сделать отображение нового блока при ховере на первый.
Помогите пожалуйста с решением проблемы.
Спасибо!

Answer 1

[Андрей Федоров]

.drop:hover > .info_drop { - это для вложенного блока, а у вас они друг за другом, значит .drop:hover + .info_drop {

Answer 2

[Владислав Лысков]

ховер может применяться только к текущему и дочерним элементам

Comments

[Апатий Черный]

И к соседнему может

[Даниил Попов]

Виталий Миронов, я бы сказал не к соседним, а к соседним, которые следуют после

[Владислав Лысков]

Даниил Попов, а вот это верно)

[Апатий Черный]

Даниил Попов, я сказал к СОСЕДНЕМУ, а не к соседним

[Ankhena]

Виталий Миронов, ну так это же неверное утверждение ))))