如何在 jQuery 中选择具有相同 class 的悬停

Question

当我将鼠标悬停在任何 .card-product div 上时，所有 .card-product div 都会受到影响。如何只选择悬停的一个？

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");
});

Answer 1

对于您的 jQuery，您可以这样做...

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

如何在 jQuery 中选择具有相同 class 的悬停

How to choose hovered one which has same class in jQuery

html

css

jquery

hover