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

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

@kyleigh_runte 

Если вы хотите добавить класс при наведении только с использованием CSS, то можно воспользоваться следующими шагами:

HTML:

1

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

CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.element {
  /* базовые стили элемента */
  color: black;
}

.element:hover {
  /* стили для элемента при hover */
  color: red;
  font-weight: bold;
  background-color: yellow;
}

В этом случае, при наведении на элемент с классом .element, цвет текста изменится на красный, текст станет жирным и фон элемента станет желтым. Нет необходимости в использовании JavaScript для добавления класса при наведении в данном примере.

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