本文主要是介绍CSS3 解决swiper轮播图在fade效果下无法点击内部元素问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
又是写轮播图时遇到的问题，这次想要实现的淡入淡出效果的轮播图
轮播图基本配置代码如下：
new Swiper(".swiper-container_2", {spaceBetween: 30,effect: "fade",//定义淡入淡出效果mousewheel: true,// preventClicks: false, // 也可以加上，但不是解决问题的关键speed: 300,fadeEffect: {crossFade: true},simulateTouch: false, //禁止鼠标模拟direction: "vertical",pagination: {el: ".swiper-pagination",clickable: true}
});
问题表现
我在轮播图的每一页都定义了一个可以跳转的a标签，但是发现点不动它，或者是一直点总有点的动的时候，连鼠标都没变成手指的样子，就很玄幻，开审查元素也没发现有被什么东西遮挡。
问题解决
从两个方面解决
一是修改slide的pointer-events属性为auto
pointer-event属性 指定在什么情况下元素可以成为鼠标事件的target
pointer-events属性有很多值，但是对于浏览器来说，只有auto和none两个值可用，其它的几个是针对SVG的（本身这个属性就来自于SVG技术）。
-
属性值none
元素永远不会成为鼠标事件的target（目标）。但当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。实际上默认就可以穿透当前层，因为pointer-events默认为auto。 -
属性值auto
效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。
.swiper-container_2 .swiper-slide {width: 100%;height: 100%;pointer-events: auto; ///这个
}
二是修改slide的z-index属性
设为fade效果的轮播图看审查元素可以知道每个slide之间切换的时候只是改变了opacity透明度，所以我们看到的slide可能是上面还有多张设为透明的slide，虽然看不见但还是可以点击触发其中的元素，使得我们其实是点击不到我们想要的slide中的元素
可以通过改变当前展示的slide的z-index属性来实现我们看到的就是最上层的slide
//gIndex -- 当前轮播页码 我自己定义的 表示当前是哪页 哪页的slide的z-index属性就为2000
:style="{ zIndex: gIndex == item.id ? 2000 : -1 ,opacity:gIndex == item.id?1:0}"
这篇关于CSS3 解决swiper轮播图在fade效果下无法点击内部元素问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
