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.