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.

Instructions

Target the .product-photo element and add an event handler that listens for a mouseenter event. For now, leave the callback function empty.

We want to make the product photos zoom in when someone hovers over them. To do this, you’ll need to add a CSS class to the product photo elements. You can add a class with the following code:

$('.example-class').addClass('photo-active');

Adjust the code above to select the '.product-photo' elements, and add the class 'photo-active' (without a period). While you may not know .addClass() yet, the syntax should look like other jQuery methods you’ve seen.

When you mouse over a product photo, the photo gets larger.

You can learn more about CSS methods in our CSS methods course.

Chain an event handler to the mouseenter event handler, but this time with a mouseleave event listener.

Inside the mouseleave event’s callback function, we want to remove the photo-active class. To do this, you can use code like this:

$('.example-class').removeClass('photo-active');

Use the syntax above to remove the class photo-active from the '.product-photo' elements.

Sign up to start coding

Or sign up using:

Already have an account?