在同一课程

Question

我正在尝试让我的div元素更改图片。我遇到的问题是我选择的所有div都在变化。我已经尝试过.each（）函数，但我无法让它工作。

$('.product_category_item div').hover(function() {
  $('.main_image').each(function() {
    $(this).css("display", "none");
  });

  $('.hover_image').each(function() {
    $(this).css("display", "block");
  });
}, function() {
  $('.main_image').each(function() {
    $(this).css("display", "block");
  });

  $('.hover_image').each(function() {
    $(this).css("display", "none");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-3 product_category_item">
  <a href="taps.html">
    <div>
      <img class="main_image" src="img/water-faucet1.jpg">
      <img class="hover_image" src="img/gold-faucet1.jpg">
      <p>
        taps
      </p>
    </div>
  </a>
</div>
<div class="col-lg-3 product_category_item">
  <div>
    <img class="main_image" src="img/block_seal.jpg">
    <img class="hover_image" src="img/round_seal.jpg">

    <p>
      seals
    </p>
  </div>
</div>
<div class="col-lg-3 product_category_item">
  <div>
    <img class="main_image" src="img/hinge1.jpg">
    <img class="hover_image" src="img/hinge2.jpg">

    <p>
      hinges
    </p>
  </div>
</div>
<div class="col-lg-3 product_category_item">
  <div>
    <img class="main_image" src="img/handle1.jpg">
    <img class="hover_image" src="img/handle2.jpg">

    <p>
      handles
    </p>
  </div>
</div>

Answer 1

尝试将代码更改为以下内容。

$('.product_category_item div').hover(function(){
   $(this).find('.main_image').hide(); 
   $(this).find('.hover_image').show();
}, function(){
   $(this).find('.main_image').show(); 
   $(this).find('.hover_image').hide();
});