Можешь попробовать работать с селектором :has(), но он может не работать на старых браузерах.
Простой пример:
<div class="container">
<div class="trigger">Наведи на меня</div>
<div class="target">Я изменюсь</div>
</div>
.trigger {
padding: 10px;
background-color: lightblue;
cursor: pointer;
transition: background-color 0.3s ease;
}
.target {
padding: 10px;
background-color: lightcoral;
transition: background-color 0.3s ease;
}
.container:has(.trigger:hover) .target {
background-color: lightgreen;
}
Селектор :has() проверяет, есть ли внутри родительского элемента container активный элемент с классом .trigger, на который наведен курсор. Когда блок trigger находится в состоянии hover, :has() находит это состояние в родительском контейнере, в контейнере срабатывает правило: стиль для target меняется на background-color: lightgreen.
Еще можно юзать JS