Почему не срабатывает смена стиля, привязанная к mouseout, при переходе от родительского узла к дочернему?
Потому что при переходе от родительского узла к дочернему не происходит mouseout, мышка так и находится над родительским элементом. Но можно запретить распространение события, и тогда все будет ок
jsfiddle.net/zv044qaL/4
Для смены стилистики элемента используйте псевдокласс css :hover. События мыши созданы не для таких задач. Сам сталкивался с ситуацией, кода mouseout не отрабатывает корректно. Обновление браузера решало эту проблемму, но нельзя надеяться на то, что у всех пользователей будут современные браузеры.