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 anevent
object that we pass into the callback function. - Inside the callback function, we select
event.currentTarget
. ThecurrentTarget
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
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.