Learn
Mouse Events
On 'mouseleave'

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

1.

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

2.

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

Folder Icon

Sign up to start coding

Already have an account?