时间戳

首页 > 解决方案 > 鼠标悬停在滑块上无法显示另一个图像

javascript - 鼠标悬停在滑块上无法显示另一个图像

问题描述

我的滑块有问题。我在 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>

标签： javascripthtmlcsshoverslider

解决方案

您可以向 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>

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

推荐阅读