Почему не работает ховер при наведении на соседа?

Question

[vova1213]

Вопрос простой, но никак не могу понять.
Ниже пример кода. Первый и последний ховер эффекты работаю, но при наведении на "Button" ховер для соседнего элемента "Р" не работает. Как так?

.block
	.block-1
		button 1
		p Qui cillum eu irure velit qui proident consectetur et ad deserunt.
	.block-2
		button.b 2
		p Qui cillum eu irure velit qui proident consectetur et ad deserunt.

.block-1,.block-2
	display: flex
	flex-direction: column
	align-items: center
	&:hover
		p
			background-color: #aaa
	button
		padding: 10px
		&:hover
			p
				background-color: #aaa

p
	&:hover
		background-color: #aaa

Comments

[Алексей Дубровин]

В css нет такого функционала.

[Lynn «Кофеман»]

А почему он должен работать?
У вас селектор не на соседний элемент, а на вложенный. Т.е. на параграф внутри кнопки. А у вас такого в HTML нет.

[iljaGolubev]

Алексей Дубровин, https://developer.mozilla.org/en-US/docs/Web/CSS/G...

[Алексей Дубровин]

iljaGolubev,
Это не функционал, который вы пытаетесь сделать
Вы пытаетесь сделать hover.
Попробуйте тогда, возможно я не правильно понял, что вы хотите

&:hover
  & ~ p

[iljaGolubev]

Алексей Дубровин, я не хотел =)

Answer 1

[iljaGolubev]

button:hover p { background-color: #aaa }
Не найдёт

<div class="block-1">
    <button>x</button>
    <p>text</p>
</div>

А .block-1:hover p { background-color: #aaa } находит

Answer 2

[vova1213]

Сам разобрался, но спасибо Илье за подсказку.
Нужно указать соседний селектор знаком + после button, потому, что Р не вложен в Button и ховер не видит его

button
&:hover
	+ p
		background-color: red