Attaches an event handler function to an element that is triggered when users hover over the element with their mouse
with .hover() you can specify two handlers functions to the matched elements, where the first handler is executed when the mouse pointer enters initially hovers over the element and the 2nd handler is executed when the most is no longer hovered over the targeted elements
$(() => {
// listen for .hover() event on .box
$('.box').hover(
(event) => {
// 1st handler function
// add .red class on hover
$(event.currentTarget).addClass('red')
},
(event) => {
// 2nd handler function
// remove .red class when hover is exited
$(event.currentTarget).removeClass('red')
})
})