Почему не работает hover?

Question

[lemonlimelike]

<input type="range" onMouseMove="changeVolume()" id="volume" value="100" min="0" max="100" />
			<img src="speakerON.png" class="img_volume" />

Есть картинка speakerON.png и есть ползунок звука, при наведение на картинку speakerON.png должен показываться ползунок, но он не показывается. Почему?
Вот CSS

#volume{
	display: none;
}
.img_volume{
	cursor:pointer;
}
.img_volume:hover #volume{
	display: block;
}

Answer 1

[iDrugov]

Потому что в редких случаях такие штуки работают только на соседний (правый элемент). В остальном, если ты наводишь мышь на .img_volume, то только его параметры и меняй. Или используй js для изменения стиля других элементов.

Answer 2

[Иван]

.img_volume:hover~#volume{
  display: block;
}

попробуй так

Comments

[lemonlimelike]

Нет, не работает

[Иван]

lemonlimelike: у вас они в одном блоке?

[Сергей delphinpro]

lemonlimelike: и не заработает =)
Такое будет работать, если в разметке инпут и картинку поменять местами.

Нет в css селектора предыдущих и родительских элементов. Только вложенные и соседние (последующие).

В интернете есть статья на эту тему, что-то типа "Почему у нас никогда не будет родительского селектора". Загуглите, просветитесь.

[lemonlimelike]

Иван: да

[lemonlimelike]

Сергей: )) Не знал об этом) Просветлился))

[lemonlimelike]

Сергей: Работает..))