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

Question

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

Answer 1

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

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>

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

.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>

3. В остальных случаях используется 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>