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.