"onmouseover" неожиданно работает в Javascript

У меня есть div, в котором есть ссылка. Когда пользователь берет указатель мыши по ссылке, я вызываю функцию basic_nav_mouseover(), которая меняет фоновое изображение родительского div. Я также добавил функцию basic_nav_mouseout в атрибут ommouseout родителя, который должен установить фоновое изображение родительского div в none, когда указатель мыши покидает div. Однако, как ни странно, функция basic_nav_mouseout() получает вызов, как только указатель мыши покидает ссылку в родительском div. Вот тестовая страница: http://spats.in/test/. Посмотрите на ссылки "about", "people", "connect" в верхнем правом углу.

Где я иду не так?

4 ответа

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

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

В принципе, чтобы исправить вашу проблему, используйте mouseenter и mouseleave.

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

Если вы хотите сохранить визуальный эффект, который вы получили в настоящее время (с высокой цветной областью за каждой ссылкой), сделайте ссылку занятой всей коробкой, то есть 100% высоты и ширины div.


onmouseout запускается каждый раз, когда дочерний элемент node зависает, вам нужно проверить вызывающую цель.

http://www.quirksmode.org/js/events_mouse.html - хороший ресурс.


Если onmouseover установлен на ссылку, onmouseout должен быть установлен на один и тот же элемент.


Я не эксперт по javascript, но не стоит ли ждать с привязкой функции к событию, пока страница не будет полностью загружена? Итак:

window.onload = function(){
 $('.item1').bind('mouseleave',basic_nav_mouseout);
};

Также (исправьте меня, если я ошибаюсь). Я не думаю, что вы должны передать объект в качестве аргумента в 'basic_nav_mouseout ('. item1 ',' red ')', вы можете просто использовать 'this' ключевое слово. Итак:

function basic_nav_mouseout(){
 this.css('background-image',"none");
}

Я ничего не знаю о библиотеке JQuery, но мой единственный (маленький) опыт работы с библиотекой Prototype.

licensed under cc by-sa 3.0 with attribution.