Code Editor
Web Browser
Learn
Mouse Events

Chaining Events

jQuery also allows us to chain multiple methods. Instead of re-declaring the HTML element you're selecting, you can append one event to another. Let's see how we can use chaining to add hover functionality to .example-class elements.

$('.example-class').on('mouseenter', () => { $('.example-class-one').show(); }).on('mouseleave', () => { $('.example-class-one').hide(); });

In the example above, we chain a mouse enter event to a mouse leave event. Both of the event handlers target .example-class elements.

When a user's mouse enters an .example-class element's area we show .example-class-one elements. When a user's mouse leaves an .example-class element's area, we hide .example-class-one elements.

Report a Bug
If you see a bug or any other issue with this page, please report it here.