>Переместите мышь для увеличения ширины:
>
>
Обратите внимание – обработчик >"mousemove" зарегистрирован у всего окна. Даже если мышь уходит за пределы полоски, нам надо обновлять её размер и прекращать это, когда кнопку отпускают.
Когда курсор попадает на узел и уходит с него, происходят события >"mouseover" или >"mouseout". Их можно использовать, кроме прочего, для создания эффектов проведения мыши, показывая или меняя стиль чего-либо, когда курсор находится над этим элементом.
К сожалению, создание такого эффекта не ограничивается запуском его при событии >"mouseover" и завершением при событии >"mouseout". При движении мыши от узла к его дочерним узлам на родительском узле происходит событие >"mouseout", хотя мышь, вообще говоря, его и не покидала. Что ещё хуже, эти события распространяются как и все другие, поэтому вы всё равно получаете >"mouseout" при уходе курсора с одного их дочерних узлов того узла, где вы зарегистрировали обработчик.
Для обхода проблемы можно использовать свойство >relatedTarget объекта событий. Он сообщает, на каком узле была до этого мышь при возникновении события >"mouseover", и на какой элемент она переходит при событии >"mouseout". Нам надо менять эффект, только когда >relatedTarget находится вне нашего целевого узла. Только в этом случае событие на самом деле представляет собой переход на наш узел (или уход с узла).
>Наведите мышь на этот параграф .
>