How to choose hovered one which has same class in jQuery

Issue

When I hover on any .card-product div, all .card-product divs affecting. How can I choose only hovered one?

HTML:

<div class="card-product">
      <img class="card-product-img" src="anywhere1">
      <img class="card-product-img2" src="anywhere2">
      <div class="card-product-name">T-Shirt</div>
      <div class="card-product-price">39$</div>
</div>

<div class="card-product">
      <img class="card-product-img" src="anywhere3">
      <img class="card-product-img2" src="anywhere4">
      <div class="card-product-name">Shirt</div>
      <div class="card-product-price">49$</div>
</div>

jQuery:

$(".card-product").mouseover(function() {
    $(".card-product-img").css("display","none");
    $(".card-product-img2").css("display","block");
});

Solution

for your jQuery, you can do this…

$(".card-product").mouseover(function() {
    $(".card-product-img", this).css("display","none");
    $(".card-product-img2", this).css("display","block");
});

Answered By – Hally

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.