我需要在div框懸停/出簡單的過渡效果，以改變第一個圖像的幫助。圖像-主圖像到第二圖像-懸停。 它現在工作得很好，但我不知道如何添加mouseOn/mouseOut效果(簡單的不透明度淡出就足夠了)。

我想使用JS，因為在這個特性中，我想添加一些額外的動作。CSS懸停效果也被破壞。img-流體活動。

HTML:

<div class="col-6">

  <div class="product-box">
    <div class="product-box__image">
      <img class="img-fluid image-main" src="https://dummyimage.com/400x200/000/fff">
      <img class="img-fluid image-hover" src="https://dummyimage.com/400x200/00cc00/fff">
    </div>
    <div class="product-box__content">
      <p class="text-center p-3">
        hello description<br>on hover - change image too
      </p>
    </div>
  </div>

</div>

JS:

$('.product-box').hover(
  function() {
    var main = $(this).find('.image-main');
    var second = $(this).find('.image-hover');
    main.removeClass('image-main');
    main.addClass('image-hover');
    second.addClass('image-main');
    second.removeClass('image-hover');

  },
  function() {
    var second = $(this).find('.image-main');
    var main = $(this).find('.image-hover');
    second.removeClass('image-main');
    second.addClass('image-hover');
    main.addClass('image-main');
    main.removeClass('image-hover');
  }
);

CSS:

.product-box {
      border: 1px solid gray;
    }

    .image-hover {
      display: none;
    }

https://jsfiddle.net/qsyr1te7/2/

只需將第一張圖片設置為完全不透明，并給它一個不透明過渡。

.image-main {
  transition: opacity .5s;
  opacity: 1;
}

然后你可以設置不透明度為0。

.hovering {
  opacity: 0;
}

現在，您可以簡單地添加或刪除第一個圖像的懸停類。

$('.product-box').hover(
  function() {
    var main = $(this).find('.image-main');
    main.addClass('hovering');
  },
  function() {
    var main = $(this).find('.image-hover');
    main.removeClass('hovering');
  }
);

希望這就是你想要的。干杯！