Почему не срабатывает смена стиля, привязанная к mouseout, при переходе от родительского узла к дочернему?

Question

[Mr_Boombastic]

Добрый день!
Для элемента установлены обработчики на mouseover/mouseout, которые при наведении курсора меняют цвет элемента.
Следуя логике, описанной здесь издесь, смена цвета должна происходить и при перемещении курсора с родительского узла на дочерний.
У меня почему-то скрипт работает не так, как ожидалось. FF 34.05, Chrome 39 и Safari 7.1.2 производят смену цвета только когда курсор полностью выходит за пределы элемента.
Посмотреть код на фиддле

Answer 1

[Сергей Мельников]

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

jsfiddle.net/zv044qaL/4

Comments

[Mr_Boombastic]

Спасибо. Кажется, до меня дошло.
При перемещении курсора от родительского узла к дочернему происходит и mouseout и mouseover, поскольку событие mouseover срабатывает на дочернем узле и распространяется на родительский. То есть, получается, родительский элемент как бы "моргает", но мы этого не замечаем, поскольку браузер не успевает отрисовать изменения.
Поправьте меня, если я где-то ошибся.

[Сергей Мельников]

Mr_Boombastic: совершенно верно

Answer 2

[Павел Елизарьев]

Для смены стилистики элемента используйте псевдокласс css :hover. События мыши созданы не для таких задач. Сам сталкивался с ситуацией, кода mouseout не отрабатывает корректно. Обновление браузера решало эту проблемму, но нельзя надеяться на то, что у всех пользователей будут современные браузеры.

Comments

[Mr_Boombastic]

Спасибо. Очень правильный совет. Однако, здесь я стиль изменяю исключительно в академических целях. Для наглядности.