CODEWITHSUNDEEP
jquery
Suzi Larsen
Suzi Larsen

Reputation: 1490

How to target one class with jquery?

I am using the below code:

 $("img").hover(function() {
  $(".portfolio4").stop().animate({opacity: "0.8"}, 'slow');
},
function() {
  $(".portfolio4").stop().animate({opacity: "1"}, 'slow');
});

I am making a gallery which is responsive, so I am using the div with the class "portfolio4" to hold all my images.

When I use the above code and hover over one image, then it fades out ALL of the portfolio4's when I only want it to just fade out the actual div that the image is nested inside of.

Hope that makes sense?

Any help would be much appreciated. I know it will be something simple but I am not sure how to change it.

Thanks

Upvotes: 0

Views: 63

Answers (2)

Adil Shaikh
Adil Shaikh

Reputation: 44740

$("img").hover(function() {
  $(this).parents(".portfolio4").stop().animate({opacity: "0.8"}, 'slow');
},
function() {
  $(this).parents(".portfolio4").stop().animate({opacity: "1"}, 'slow');
});

Upvotes: 1

Denys Séguret
Denys Séguret

Reputation: 382102

Use closest to get to the enclosing div :

$("img").hover(function() {
  $(this).closest(".portfolio4").stop().animate({opacity: "0.8"}, 'slow');
},
function() {
  $(this).closest(".portfolio4").stop().animate({opacity: "1"}, 'slow');
});

Upvotes: 3

Related Questions