Mouse Events

Question 1

Add an event listener to the menu-button class that shows nav-menu class when the mouse hovers over the menu-button element.

Answer 1

$(document).ready(() => {
$(‘.menu-button’).on(‘mouseenter’, () => {
$(‘.nav-menu’).show();
})

$(‘.nav-menu’).on(‘mouseleave’, () => {
$(‘.nav-menu’).hide();
})
});

Question 2

When combining a mouseenter event listener with a mouseleave even listener, you can do something called chained events, how can you do this?

Answer 2

$(document).ready(() => {
$('.menu-button').on('mouseenter', () => {
$('.nav-menu').show();
}).on('mouseleave', () => {
$('.nav-menu').hide();
})
});