Как добавить класс при наведении на блок в angular.js?

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

от amber_moore , в категории: JavaScript , год назад

Как добавить класс при наведении на блок в angular.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от hattie , год назад

@amber_moore 

В AngularJS для добавления класса при наведении на блок можно использовать директиву ng-class, а также директиву ng-mouseover для обработки события наведения курсора мыши на блок. Например, следующий код добавляет класс "highlight" при наведении на блок:

1
Наведите курсор мыши на этот блок


Здесь мы используем объект в качестве аргумента ng-class, где свойство "highlight" имеет значение true, если переменная hovered равна true. При наведении курсора мыши на блок переменная hovered становится true, что приводит к добавлению класса "highlight". При уходе курсора мыши с блока переменная hovered снова становится false, что приводит к удалению класса "highlight".

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

от shayna.buckridge , месяц назад

@amber_moore 

Кроме того, в AngularJS также можно использовать нативный AngularJS метод ng-mouseenter для добавления класса при наведении на блок. Пример:

1
2
3
<div ng-class="{ 'highlight': isHovered }" ng-mouseenter="isHovered = true" ng-mouseleave="isHovered = false">
  Наведите курсор на этот блок
</div>


В этом примере при наведении курсора мыши на блок добавляется класс "highlight", а при уходе курсора - класс удаляется. Директивы ng-mouseenter и ng-mouseleave позволяют обрабатывать события наведения и ухода курсора мыши на элемент, а ng-class добавляет класс в зависимости от значения переменной isHovered.