Learn

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.

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.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?