Как задать hover элементу с помощью javascript?

Question

Я знаю, что можно добавить стили для элементов на странице подобным способом, который указан ниже. Но как задать так hover не знаю, а нужно именно через javascript, желательно без jquery.

const container = document.getElementsByClassName('header_container') as HTMLCollectionOf<HTMLElement>;
container[0].style.background = 'white';

Answer 1

Повести на элемент обработчик mousemove - чтобы выдавать цвет и mouseleave - чтобы "отбирать" цвет.

let btn = document.querySelector('.elem'); // Берём элемент

btn.addEventListener('mouseenter', function(e){ // Вешаем на него обработчик mouseenter - при наведение мыши на элемент
  e.target.style.backgroundColor = 'yellow'; // Выставляем цвет
});

btn.addEventListener('mouseleave', function(e){ // И ещё обработчик mouseleave - при "уходе" курсора с элемента
  e.target.style.backgroundColor = ''; // Убираем выданный цвет
});

.elem {
  display: inline-block;
  padding: 1em 2em;
  border: 2px solid #000;
  background: #09f;
}

<div class="elem">Наведи</div>

Answer 2

Для работы с ховером не обязательно навешивать события. Более подробно можно узнать в документации либо в этой статье, разумеется в реальном проекте код будет чуточку сложнее приведенного ниже. Но лично я бы советовал пользоваться таким подходом когда нет реальной возможности задать стили заранее, например когда код генерируется в процессе его работы.

document.styleSheets[0].insertRule('h1:hover{color:red}', 0);

<h1>Hello World</h1>

БЛОГ НА HUSL

Как задать hover элементу с помощью javascript?

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