Справочник API
.hover() в jQuery
Содержание статьи
-
Категории: Events › Mouse Events
Устанавливает обработчики JS событий mouseenter (указатель мыши попадает в область, покрытую элементом) и mouseleave (при выходе за ее пределы) для всех элементов набора jQuery.
Синтаксис и описание:
Добавлено в jQuery 1.0.hover( handlerIn( eventObject ), handlerOut( eventObject ) )
Добавлено в jQuery 1.4.hover( handlerInOut( eventObject ) )
Команда .hover() — комбинированный шорткат сразу для двух событий: mouseenter (курсор входит в границы элемента) и mouseleave (курсор покидает элемент). Первая форма принимает два обработчика — отдельно на вход и на выход курсора; вторая, более короткая форма (с jQuery 1.4) принимает один обработчик, который вызывается в обоих случаях.
В отличие от mouseover/mouseout, события mouseenter/mouseleave не всплывают от дочерних элементов и не срабатывают повторно при перемещении курсора между вложенными элементами внутри того же контейнера — это и есть их главное практическое преимущество для наведения. Подробнее о механике .on() и делегировании событий — в статье подробнее о .on() и делегировании.
Возвращаемое значение: (объект) Набор jQuery.
Параметры:
handlerIn( eventObject ) – Функция, вызываемая при входе курсора мыши в границы элемента (аналог обработчика mouseenter).
handlerOut( eventObject ) – Функция, вызываемая при выходе курсора мыши за границы элемента (аналог обработчика mouseleave).
handlerInOut( eventObject ) – Единая функция-обработчик, вызываемая и при входе, и при выходе курсора; определить, что именно произошло, можно по event.type (mouseenter или mouseleave).
Примечание:
Если цель — только визуальный эффект (подсветка фона, изменение цвета текста, показ декоративного элемента без анимации на JS), проще и производительнее использовать псевдокласс CSS :hover, а не JavaScript-обработчик: браузер обрабатывает его без обращения к скриптам.
Примечание:
.hover() имеет смысл, когда по наведению нужно что-то большее, чем просто применить CSS-класс: подгрузить данные, запустить таймер задержки перед показом тултипа, изменить состояние в JS-логике приложения.
Примечание:
На сенсорных устройствах у mouseenter/mouseleave нет прямого аналога — на тач-экранах события эмулируются браузером непоследовательно, поэтому интерфейс не должен зависеть от .hover() как от единственного способа показать важную функциональность.
В jQuery 3.x и 4.0:
Метод .hover() deprecated начиная с jQuery 3.3, но не удалён — работает в 3.7.1 и 4.0. Официальная замена для двух обработчиков —
.on("mouseenter", handlerIn).on("mouseleave", handlerOut), для одного обработчика —.on("mouseenter mouseleave", handlerInOut).
Примеры:
Подсветить строку таблицы при наведении и снять подсветку при уходе курсора (устаревший, но рабочий синтаксис).
$('table tr').hover( function() { $(this).addClass('row-hover'); }, function() { $(this).removeClass('row-hover'); } );Тот же результат через современный .on() с двумя обработчиками.
$('table tr') .on('mouseenter', function() { $(this).addClass('row-hover'); }) .on('mouseleave', function() { $(this).removeClass('row-hover'); });Один обработчик на оба события — переключение класса по event.type.
$('.card').hover(function(event) { $(this).toggleClass('active', event.type === 'mouseenter'); });Если задача чисто визуальная, то же самое поведение проще получить без единой строки JS.
/* CSS вместо .hover(), когда нужен только визуальный эффект */ .card:hover { background-color: #f5f5f5; }