Learn

Have you noticed in our Sole Shoes website that when you mouse over one photo, all of the images zoom. That’s because .product-photo is a class on all the product photos.

One way to solve this issue is to give each HTML element a unique class and to write three mouseenter and mouseleave functions. That, however, would result in a lot of repetitive code. Luckily there’s a better way.

The solution is in the callback function and selector we’re using when we add a new class. Instead of selecting $('.product-photo') in each callback function, we need to pass event information into the function and call the currentTarget attribute:

$('.example-class').on('mouseenter', event => { $(event.currentTarget).addClass('photo-active'); });

The points below explain some of the features of the event.currentTarget selector in the example above.

  • When a user triggers the mouseenter event listener above, the .on() method generates an event object that we pass into the callback function.
  • Inside the callback function, we select event.currentTarget. The currentTarget attribute refers to only the .example-class element that the learner has moused over.
  • Since $(event.currentTarget) refers to the element that an event is detected on, you will only use it inside a callback function.

In our Sole Shoes website, we will use $(event.currentTarget) to target the one image a user mouses over.

Instructions

1.

Add event as an argument to your .product-photo callback functions.

Inside the callback functions, use event.currentTarget to make only one image at a time zoom in and zoom out when your mouse enters and leaves.

Take this course for free

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

Or sign up using:

Already have an account?