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

Question

[Valery23]

Есть код, как задать

opacity: 0.5;
box-shadow: 0px 15px 19px rgba(0, 0, 0, 0.24);

блоку .four_home_item при наведении на .four_home_item_botton. Пробовал вот так, но не работает:

.four_home_blocks .four_home_item_main .four_home_item_botton:hover .four_home_item{
opacity: 0.5;
box-shadow: 0px 15px 19px rgba(0, 0, 0, 0.24);
}

:

<div class="four_home_item_main">
        	<div class="four_home_item">
        	<div class="four_home_item_op">
        	<div class="four_home_item_img">Текст</div>
        	<div class="four_home_item_title">Текст</div>
        	<div class="four_home_item_desc">Текст</div>
        	</div>
        	</div>
        	<div class="four_home_item_botton">
        		<a href="#">Текст</a>
        	</div>
        	</div>

Comments

[Rustam Bainazarov]

С такой структурой — никак через CSS. В обратную сторону CSS идти не умеет.

Можно поставить . four_home_item_button перед всеми элементами, а затем с помощью flex и order визуально в конец переместить. Тогда будет можно.

[Valery23]

Рустам Байназаров, а у меня .four_home_item_button в абсолютной позиции ))

[Valery23]

Михаэль Вейк, спасибо, но поменял местами, как сказал Рустам и сработало.

[Rustam Bainazarov]

Valery23, ну отлично, тогда в начало структуры переносите и

.four_home_item_button:hover .four_home_item {
   opacity: 0.5;
   box-shadow: 0px 15px 19px rgba(0, 0, 0, 0.24);
}

[Valery23]

Рустам Байназаров, Да. Уже сработало. Спасибо