Просмотров: 2 425

Jquery. Cобытие, когда пользователь отвел курсор мыши (обратное hover).

Задача, которая очень часто встречается на практике, нужно чтобы при наведении курсора на какой-то элемент выполнялось одно действие, а когда курсор выходит за пределы элемента, выполнялось другое действие.

Долго искал какое-то отдельное событие для этого, но все оказалось намного проще.

Вот как можно реализовать такой эффект:

$(селектор).hover(function() {
    Что делать, когда курсор в зоне действия элемента
},
function() {
    Что делать, когда курсор выходит из зоны действия элемента.
}
);

Посмотрите, как это работает на практике:

Вот код, который в этом случае работает.

HTML:

 <div id="block"></div>

CSS:

#block {width:100px; height:100px; border:1px solid #ccc;}

Javascript:

$('#block').hover(
 function() {
 $("#block").css("background-color", "yellow");
 },

 function() {
 $("#block").css("background-color", "white");
 }
);