鼠标悬停在滑块上无法显示其他图像

Question

I'm having some problem with the slider. I have using this slider on WordPress page with custom plugin that allow to add html/css/js after an update I have lost a script so I can't find. The problem is this normally is an image without color, but on hover I want to show the original image with color, pagination is working well, so next image need to be shown without color. I will share the code that I have with missing js for hover to show other image.

As you can see I have 2 links

<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

You could add a class to the img-tags and add the styles for the hover-effect. Hide the hover image as default. If you hover on the div around the images, hide the default image and show the other one.

 .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>

You could also place the hover-image absolute above the standard image and add some effects.