QSnake
@QSnake

Взаимодействие с другими классами и блоками можно ли так?

Изучаю верстку и CSS. Пока что я не могу понять, как из условного блока изменить значение в другом.

Хочу, чтобы при нажатие на один блок было взаимодействие с другим блоком. Но только не родительском классе, а в другом, так можно?

Я уже пробовал лепить пластилин, но мой код был ужасный и куча всего ненужного. Прошу подсказать, в каком направлении мне вообще двигаться, чтобы понять суть моего вопроса.
  • Вопрос задан
  • 118 просмотров
Решения вопроса 1
Можешь попробовать работать с селектором :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
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@ImagineTables
Декларативно (на pure CSS) можно сделать что-то типа такого:

body:has(.first-block:hover) .second-block
{
    background: red;
}


И неважно, где эти блоки и как связаны. :hover можно заменить на другой псевдокласс, обозначающий взаимодействие с юзером, например :active или :focus-visible.

Но для кликов лучше прибегнуть к императивному скрипту (используется jQuery):

$('.first-block').on('click', () => $('.second-block').addClass('red');


И, само собой, CSS:

.red
{
    background: red;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы