Как добавить класс при hover на элемент с помощью css?

Пользователь

от kyleigh_runte , в категории: HTML/CSS , 7 месяцев назад

Как добавить класс при hover на элемент с помощью css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от jerad.kuphal , 7 месяцев назад

@kyleigh_runte 

Вы можете добавить класс при наведении на элемент с помощью псевдокласса :hover в CSS. Для этого вам нужно указать селектор элемента, за которым следует псевдокласс :hover, а затем добавить необходимый класс с помощью свойства class или classList.add().


Вот пример:


HTML:

1
<div class="element">Element</div>


CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.element:hover {
  /* стили для элемента при hover */
  color: red;
  font-weight: bold;
}

.element.hovered {
  /* стили для элемента с добавленным классом .hovered */
  background-color: yellow;
}


JavaScript (для добавления класса с помощью JavaScript):

1
2
3
4
5
6
7
8
9
const element = document.querySelector('.element');

element.addEventListener('mouseover', function() {
  this.classList.add('hovered');
});

element.addEventListener('mouseout', function() {
  this.classList.remove('hovered');
});


В этом примере, при наведении на элемент с классом .element, цвет текста изменится на красный и текст станет жирным. Когда класс .hovered будет добавлен, задний фон элемента станет желтым. Класс .hovered добавляется или удаляется при событиях mouseover и mouseout с помощью JavaScript.