jQuery MouseOut активная область неправильная и не работает должным образом

Question

Я создал div, когда я наводил курсор на элемент меню с классом «megamenu». Мой jQuery добавляет класс 'open' в div, который изменяет значение высоты от 0 до 170 пикселей.

$(".megamenu").hover(
    function() { 
     $(".about-us-megamenu").addClass("open"); 
    } 
); 
$(".about-us-megamenu").mouseout(
    function() { 
     $(".about-us-megamenu").removeClass("open"); 
    } 
); 

Это прекрасно работает, но ...

Я хочу, чтобы удалить класс «открытого», когда курсор перемещается из дел. Тем не менее, в настоящее время он работает только в пределах ширины оболочки содержимого, которая у меня есть на странице (960px), и удаляет класс после перемещения курсора примерно на 40 пикселей вниз, а не на 170 пикселей. Мой URL развития:

http://allentullett.co.uk/sandbox/guac/

Может кто-нибудь помочь мне с моим затруднительным?

Answer 1

Возможно, также есть обработчик mouseout на самом div?

Answer 2

Хотя изучение «mouesout» Чем больше я наткнулся на ответ, который работал для меня wihch был «MouseLeave»

$(".megamenu").hover(
    function() { 
     $(".about-us-megamenu").addClass("open"); 
    } 
); 
$(".about-us-megamenu").mouseleave(
    function() { 
     $(".about-us-megamenu").removeClass("open"); 
    } 
); 

теперь работает.

Благодарим вас за вашу помощь, хотя и очень благодарен.