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

Question

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

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

Answer 1

В документах jQuery есть очень хорошее объяснение limitations of the mouseover and mouseout events (примерно половина пути вниз по этой странице).

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

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

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

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

Answer 2

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

Answer 3

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

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

Answer 4

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

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

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

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

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