CODEWITHSUNDEEP
jqueryjquery-ui
TechRemarker
TechRemarker

Reputation: 2938

jQuery Toggle on Hover Multiple Instances

Currently hovering over one div causes all three to toggle at once. Trying to figure out how to get only the item being hovered over to toggle at that time. While I could give each a unique ID and duplicate the javascript rules for each, I would assume there is a cleaner way without having to add additional unique classes since there will be many more than the three in the demo.

Code: http://codepen.io/anon/pen/BNdggv

$( ".product" ).hover(function() {
  $( ".product-caption.odd" ).toggle( "slide",{direction:"left"},500);
  $( ".product-caption.even" ).toggle( "slide",{direction:"right"},500);

});

Upvotes: 0

Views: 59

Answers (1)

Juan
Juan

Reputation: 5050

use $(this).find() to get the product caption of the hovered element

Demo

$( ".product" ).hover(function() {
  $(this).find(".product-caption.odd" ).toggle( "slide",{direction:"left"},500);
  $(this).find(".product-caption.even" ).toggle( "slide",{direction:"right"},500);

});

Upvotes: 3

Related Questions