鼠标进入和离开时,前进后退按钮显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<title>Document</title>
</head>
<style>
.container {
width: 1200px;
margin: 0 auto;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-button-hide {
display: none;
}
.swiper-slide {
opacity: 0.6;
}
.swiper-slide-active {
opacity: 1;
}
</style>
<body>
<div class="container">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607141159167&di=74c47f6fe7ca695ded1f7c5bf27e4d13&imgtype=0&src=http%3A%2F%2Fww3.sinaimg.cn%2Flarge%2F007Q5zgrgy1g3xepl9ppij31hc0u0x6p.jpg"
alt=""></div>
<div class="swiper-slide"><img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607141179502&di=fb08cbf49785aaa64c5317b87625e6f1&imgtype=0&src=http%3A%2F%2Fbbsimg.ubgame.com%2Fdata%2Fattachment%2Fforum%2F201608%2F10%2F1758061f10xsls0lom3170.jpg"
alt=""></div>
<div class="swiper-slide"><img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607141159166&di=7fd77e108a24c8be2b9466fbf9f62db7&imgtype=0&src=http%3A%2F%2Fww3.sinaimg.cn%2Flarge%2F007Q5zgrgy1g3xepjbqcvj31hc0u0npe.jpg"
alt=""></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
<script>
var mySwiper = new Swiper('.swiper-container', {
loop: true,
centeredSlides: true,
slidesPerView: 2,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
mySwiper.el.onmouseover = function () {
mySwiper.navigation.$nextEl.removeClass('swiper-button-hide');
mySwiper.navigation.$prevEl.removeClass('swiper-button-hide');
}
mySwiper.el.onmouseout = function () {
mySwiper.navigation.$nextEl.addClass('swiper-button-hide');
mySwiper.navigation.$prevEl.addClass('swiper-button-hide');
}
</script>
</body>
</html>
效果展示
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d8728bc4569829f93107640e68ba7352.png#pic_center)