Learn

One issue with the behavior we added to our Sole Shoes website in the last exercise is that the menu remains in the DOM after the mouse leaves the menu area.

The mouseleave event listener can detect when a user’s mouse leaves the area that an element occupies. The syntax looks like:

$('.example-class').on('mouseleave', function() {
    // Execute code here when mouse leaves .example-class
});

In the example code above, a user will trigger the callback function when their mouse leaves the .example-class area.

Instructions

In the ready callback function, target the .nav-menu element, and add an event handler with a mouseleave event listener and empty callback function.

Inside the empty callback function, use the .hide() method to hide the .nav-menu element when a user’s mouse leaves the navigation menu.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?