При нахождении на странице состояние при наведении курсора мыши игнорируется

Question

Я использую довольно стандартный JavaScript / jQuery для обработки парящих элементов, смены изображений, скользящих div, анимаций и т. Д., Это не имеет значения. Если / при щелчке по связанному элементу «hoverable» вы попадете на новую страницу, состояние mouseenter всегда будет зависать.

Например, если вы наводите курсор мыши на что-то и щелкаете по нему (ссылка на другую страницу), а затем с помощью кнопки назад возвращаетесь на страницу, состояние mouseenter на элементе, на который вы щелкнули, застревает хотя ваша мышь больше не находится над элементом.

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

$(document).ready(function() {
    $('.mySelector').each(function () {
        $(this).hover(enter, leave);
    });

    function enter(event) { 
        // mouseenter stuff
    };
    function leave(event) { 
        // mouseleave stuff
    };
});

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

Кто-нибудь знаком с правильным решением?

Благодарственное вы!

Answer 1

В итоге я просто «переустановил» эффекты при наведении, вызвав функцию mouse left с окном «unload» ...

$(window).unload(function() {
    leave();
});

Каждый раз, когда вы покидаете страницу, щелкая элемент мыши, вызывается функция mouseleave , даже если ваша мышь все еще находится над элементом. Нажатие кнопки «Назад» браузера больше не возвращает вас на страницу с «зависшим» эффектом наведения.

Проблема решена.

Answer 2

Вам не нужно использовать .each для этого.Кроме того, функции должны быть вне .ready.

$(document).ready(function() {
    $('.mySelector').hover(enter, leave);
});

function enter(event) { 
    // mouseenter stuff
}

function leave(event) { 
    // mouseleave stuff
}

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

$(document).ready(function() {
     $('.mySelector').hover(function(){
         // mouseenter stuff
     },
     function(){
         // mouseleave stuff
     });
});