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
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.
Take this course for free
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.