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.