鼠标悬停在滑块上无法显示另一张图片

Question

滑块有问题。我在 WordPress 页面上使用了这个带有自定义插件的滑块，允许在更新后添加 html/css/js 我丢失了一个脚本，所以我找不到。问题是这通常是没有颜色的图像，但是在悬停时我想显示有颜色的原始图像，分页效果很好，所以下一张图像需要显示没有颜色。我将分享我的代码，其中缺少用于悬停以显示其他图像的 js。

如你所见，我有 2 个链接

<img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_1_1-1.jpg" />
first line for slider that is normally shown
<img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_1_2-1.jpg" />
second line for the slider that need to be shown only on mouse hover

var swiper = new Swiper('.swiper-container', {
  spaceBetween: 30,
  centeredSlides: true,
  //                autoplay: {
  //                    delay: 2500,
  //                    disableOnInteraction: false
  //                },
  autoplay: false,
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  }
});
$(".swiper-container").mouseenter(function() {
  swiper.autoplay.start();
});
$(".swiper-container").mouseleave(function() {
  swiper.autoplay.stop();
});

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.css" />
<div class="slider-comp core-slider">
  <div class="core-slider__info">
    <div class="core-slider__arrows">
      <!-- If we need navigation buttons -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
  <div class="core-slider__images">
    <div class="custom-swiper swiper-container">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">
          <div class="aspect-ratio">
            <img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_1_1-1.jpg" />
            <img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_1_2-1.jpg" />
          </div>
        </div>
        <div class="swiper-slide">
          <div class="aspect-ratio">
            <img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_2_1-1.jpg" />
            <img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_2_2-1.jpg" />
          </div>
        </div>
        <div class="swiper-slide">
          <div class="aspect-ratio">
            <img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_3_1-1.jpg" />
            <img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_3_2-1.jpg" />
          </div>
        </div>
        <div class="swiper-slide">
          <div class="aspect-ratio">
            <img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_4_1-1.jpg" />
            <img src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_4_2-1.jpg" />
          </div>
        </div>
      </div>
      <!-- If we need pagination -->
      <div class="swiper-pagination"></div>
    </div>
  </div>
</div>

Answer 1

您可以将 class 添加到 img-tags 并添加悬停效果的样式。默认情况下隐藏悬停图像。如果将鼠标悬停在图片周围的 div 上，隐藏默认图片并显示另一张图片。

.hover_img{display: none;}
.aspect-ratio:hover .hover_img{
  display: block;
}
.aspect-ratio:hover .standard_img{
  display: none;
}

<div class="aspect-ratio">
            <img class="standard_img" src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_1_1-1.jpg" />
            <img class="hover_img" src="https://www.pika.com.mk/wp-content/uploads/2021/01/slider_1_2-1.jpg" />
            </div>

您也可以将悬停图像绝对放置在标准图像上方并添加一些效果。

鼠标悬停在滑块上无法显示另一张图片

Mouse Hover on Slider not working to show another image

html

javascript

css

slider

hover