Работа с this в js

Question

Как организовать работу this относительно выбранной области? (По аналогии с css) css: .класс:hover .класс

При наводке на один класс изменится другой. Хотел бы реализовать аналогию.

То есть, допустим у меня есть header в html. В нем есть тег li(не один, генерируется сразу после ввода данных и узнать его длину остаётся невозможным.) Хочу сделать возможным использование drag&drop, для изменения внешнего вида под посетителя. Проблема возникает как раз с определением созданых тегов. Как можно решить проблему? Задать всем тегам li один стиль? И уже опираясь на это строить свой код? Жду ваши предложения для постройки велосипеда. (Хотелось бы именно использовать this для этой задачи, но вот как использовать его тут правильно ума не предположу)

Answer 1

const mouseTarget = document.querySelector('.mouse');
const events = ['mouseenter', 'mouseleave'];

for (let evt of events) {
  mouseTarget.addEventListener(evt, e => {
    e.target.classList.toggle('hovered');
    e.target.querySelector('.inner').classList.toggle('dark');
  });
}

.mouse {
  width: 100px;
  height: 100px;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  width: 50px;
  height: 50px;
  background-color: red;
}

.mouse.hovered {
  background-color: red;  
}

.inner.dark {
  background-color: black;
}

<div class='mouse'>
  <div class='inner'></div>
</div>

Answer 2

.mouse {
  width: 100px;
  height: 100px;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  width: 50px;
  height: 50px;
  background-color: red;
}

.mouse:hover {
  background-color: red;  
}

.mouse:hover .inner {
  background-color: black;
}

<div class='mouse'>
  <div class='inner'></div>
</div>

БЛОГ НА HUSL

Работа с this в js

Ответы (2 шт):