jQuery метод .hover()

Определение и применение

jQuery метод .hover() связывает один или два обработчика событий для элемента, которые будут выполнены, когда указатель мыши находится на элементе и при его отведении.

jQuery синтаксис:

Синтаксис 1.0:

$( selector ).hover( handlerIn, handlerOut )

handlerIn - Function( Event eventObject )

handlerOut - Function( Event eventObject )

Синтаксис 1.4:

$( selector ).hover( handlerInOut )

handlerInOut - Function( Event eventObject )

Метод .hover() объединяет обработчики событий "mouseenter" (срабатывает, когда указатель мыши заходит на элемент) и "mouseleave" (срабатывает, когда указатель мыши выходит из элемента) и при вызове с двумя функциями в качестве параметров является короткой записью вызова методов .mouseenter() и .mouseleave():

$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

Обратите внимание, что если в качестве параметра метода передается только одна функция, то она будет вызвана как при наведении указателя мыши на элемент, так и при выходе курсора с элемента.

Добавлен в версии jQuery

Значения параметров

Пример старого кода

<div></div>

$(document).ready(function () {
    $('div').hover(
        function () {
            $('div').css('background', 'green').text('Курсор на элементе')
        },
        function () {
            $('div').css('background', 'red').text('Курсор вышел из элемента')
        }
    )
})

div {
    width: 150px;
    height: 150px;
    border: 1px solid green;
}

В этом примере с использованием jQuery метода .hover() мы при наведении курсором мыши на элементе <div> задаем функцию, которая с использованием метода .css() задает цвет заднего фона элемента, а с использованием метода .text() задаем текстовое содержимое. После того как указатель выходит из элемента срабатывает вторая функция, которая также изменяет цвет заднего фона и изменяет текстовое содержимоей элемента <div>.

Рассмотрим следующий пример в котором передадим в качестве параметра метода .hover() одну функцию:

<div></div>

$(document).ready(function () {
    $('div').hover(function () {
        $(this).toggleClass('background-red')
    })
})

div {
    width: 150px;
    height: 150px;
    border: 1px solid red;
    background: green;
}
.background-red {
    background: red;
}

В этом примере с использованием jQuery метода .hover() мы при наведении курсором мыши на элементе <div> задаем функцию, которая с использованием метода .toggleClass() добавляет класс элементу при наведении, и убирает класс у элемента, когда курсор выходит за элемент, то есть мы используем одну функцию для двух событий.