Как при наведении на один объект изменять стиль другого?

Question

[Dar1uz]

почему не работает этот код?

<div class="block1">
	<div class="label">text</div>
	<div class="block2">
		<a href="">1</a>
		<a href="">2</a>
		<a href="">3</a>
	</div>
</div>
<style>
	.block2 {
		display: none;
	}
	.block1:hover ~ .block2 {
		display: inline;
	}
</style>

Comments

[Ankhena]

Сотрите ~, у вас должен быть контекстный селектор, а не по соседям

Answer 1

[Rsa97]

Потому что ~ - это следующий элемент того же уровня (subsequent-sibling), а вам нужен потомок (children).

Comments

[Dar1uz]

А какой символ для этого нужно использовать? И какие вообще в подобных ситуациях есть символы?

[Владимир Е]

Dar1uz, в данном случае можно обойтись без символа ~

И какие вообще в подобных ситуациях есть символы?

например - https://webdesign.tutsplus.com/ru/the-30-css-selec...

Answer 2

[UthvfyV]

.block1:hover .block2 {
    display: inline;
  }