Придание стилей одному элементу при наведении на другой

150

23 марта 2022, 00:00

Если использовать псeвдоэлемент :hover и прописать стили конкретному элементу, то эти стили будут применены к нему. Но как сделать так, чтобы прописанные стили при наведении на элемент применялись к другому элементу?

Answer 1

Решение задачи зависит от взаимного расположения блоков в разметке.

Элемент-цель находится на одном уровне и обязательно после элемента-триггера:

.wrapper { 
  display: flex; 
} 
 
.trigger, 
.target { 
  width: 50px; 
  height: 50px; 
} 
 
.trigger { 
  background-color: royalblue; 
  margin-right: 16px; 
} 
 
.trigger:hover + .target { 
  background-color: tomato; 
}

<div class="wrapper"> 
  <div class="trigger"></div> 
  <div class="target"></div> 
</div>

Элемент-цель является потомком элемента-триггера:

.wrapper { 
  display: flex; 
} 
 
.trigger { 
  width: 50px; 
  height: 50px; 
} 
 
.trigger { 
  background-color: royalblue; 
  margin-right: 16px; 
} 
 
.trigger:hover .target { 
  width: 25px; 
  height: 25px; 
  background-color: tomato; 
}

<div class="wrapper"> 
  <div class="trigger"> 
    <div class="target"></div> 
  </div> 
   
</div>

В остальных случаях используется JavaScript:

let trigger = document.querySelector(".trigger"); 
let target = document.querySelector(".target"); 
 
trigger.addEventListener("mouseover", function() { 
  target.classList.add("active") 
}); 
 
trigger.addEventListener("mouseleave", function() { 
  target.classList.remove("active") 
});

.wrapper { 
  display: flex; 
} 
 
.trigger, 
.target { 
  width: 50px; 
  height: 50px; 
} 
 
.trigger { 
  background-color: royalblue; 
  margin-left: 16px; 
} 
 
.target.active { 
  background-color: tomato; 
}

<div class="wrapper"> 
  <div class="target"></div> 
  <div class="trigger"></div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Фатальная ошибка

Есть у меня парсер музыки с ВК, так вот, он перестал работать, в чём может быть проблема?

PHP

Не работает фильтр array_filter php

Хочу от фильтровать массив, где есть значения "o" но что-то неправильно делаю, что надо изменить в коде? Чтоб массив отфильтровался и сохранял...

160

PHP

Повтор php скрипта

Есть крон, но он может запускать скрипт не чаще чем раз в минутуТак вот как сделать так, чтобы крон запускал скрипт, а он самоповторялся 5 раз...

113

PHP

Поиск подстроки с определенным набором символов в нужном порядке

Приветствую и сразу хочу подчеркнуть, что не интересует какое-либо другое решение, кроме как одна единственная операция с помощью функции...

134