cursor设置后z-index无效 如何解决
用了swiper插件，然后next和prev按钮改成了cursor-url
但是发现banner的a标签在底层无法点击到，设置z-index属性也无法使用，如何解决？
<head>
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
head>
<body>
<div class="swiper" id="swiper-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="bannerbox">
<img src="//cdn.shopify.com/s/files/1/0520/6396/1266/files/oasi-collection-fw22-zegna-03-m13-hp-desk-v2.webp.editorialImage.R32.jpg?v=1667219684"
class="bannerimg">
<div class="textbox" style="top:75%;left:38%;">
<p class="bannerp-a970a30b-2acd-4572-8a1e-595a6a5492ff">Born in Oasi Zegnap>
<h2 class="bannerh2-a970a30b-2acd-4572-8a1e-595a6a5492ff">The Triple Stitch™ Sneakerh2>
<div class="bottonbox">
<a href="" style="display:none;" class="bottonwhite">
a>
<a href="" style="" class="bottonblack">
Explore
a>
div>
div>
div>
div>
<div class="swiper-slide">
<div class="bannerbox">
<img src="//cdn.shopify.com/s/files/1/0520/6396/1266/files/outdoor-capsule-collection-for-men-zegna-03-M13-desk-ratio137-three-man.webp.editorialImage.R32.jpg?v=1667219692"
class="bannerimg">
<div class="textbox" style="top:74%;left:38%;">
<p class="bannerp-743ba934-86e3-44ef-9d67-342da5471cc4">Born in Oasi Zegnap>
<h2 class="bannerh2-743ba934-86e3-44ef-9d67-342da5471cc4"><b>Outdoor Collectionb>h2>
<div class="bottonbox">
<a href="/collections/all" style="" class="bottonwhite">
The Collection
a>
<a href="/collections" style="" class="bottonblack">
Explore
a>
div>
div>
div>
div>
<style>
.bannerp-743ba934-86e3-44ef-9d67-342da5471cc4 {
color: #fff;
font-size: 15px;
}
.bannerh2-743ba934-86e3-44ef-9d67-342da5471cc4 {
color: #fff;
font-size: 35px;
}
style>
div>
<div class="swiper-pagination" id="swiper-slider-pagination">div>
<div class="swiper-button-prev" id="swiper-slider-button-prev">div>
<div class="swiper-button-next" id="swiper-slider-button-next">div>
div>
<script type="module">
import Swiper from 'https://unpkg.com/swiper@8/swiper-bundle.esm.browser.min.js'
const swiper = new Swiper('#swiper-slider', {
loop: true,
pagination: {
el: '#swiper-slider-pagination',
paginationClickable :true,
},
navigation: {
nextEl: '#swiper-slider-button-next',
prevEl: '#swiper-slider-button-prev',
},
})
script>
<style>
main {
padding-bottom: 0px !important;
}
.bannerbox{
position:relative;
margin-bottom: -8px;
}
.bannerimg{
width:100%;
}
.textbox{
position:absolute;
display: flex;
flex-direction: column;
align-items: center;
}
.bottonbox{
display:flex;
margin-top: 30px;
}
.bottonwhite{
background: #fff;
color: #000;
text-decoration: none;
font-size: 20px;
width: 200px;
display: flex;
flex-direction: column;
align-items: center;
padding: 6px;
margin: 0px 20px;
z-index: 5;
}
.bottonwhite:hover{
background: #000;
color: #fff;
text-decoration: none;
font-size: 20px;
width: 200px;
display: flex;
flex-direction: column;
align-items: center;
padding: 6px;
margin: 0px 20px;
}
.bottonblack{
background: #000;
color: #fff;
text-decoration: none;
font-size: 20px;
width: 200px;
display: flex;
flex-direction: column;
align-items: center;
padding: 6px;
margin: 0px 20px;
z-index: 5;
}
.bottonblack:hover{
background: #fff;
color: #000;
text-decoration: none;
font-size: 20px;
width: 200px;
display: flex;
flex-direction: column;
align-items: center;
padding: 6px;
margin: 0px 20px;
}
.swiper-pagination-bullet {
width: 30px;
height: 3px;
border-radius: 0%;
}
.swiper-pagination-bullet-active {
background: #fff;
}
.swiper-button-next, .swiper-button-prev {
position: absolute;
top: 0%;
width: 50%;
height: 100%;
margin-top: 0px;
display: flex;
align-items: center;
justify-content: center;
color: #fff0;
}
#swiper-slider-button-next{
cursor:url("https://img.icons8.com/ios-filled/50/000000/circled-chevron-right.png"),auto;
z-index:1;
right:0px;
}
#swiper-slider-button-prev{
cursor:url("https://img.icons8.com/ios-filled/50/000000/circled-chevron-left.png"),auto;
z-index:1;
left:0px;
}
style>
<script src="https://unpkg.com/swiper@8/swiper-bundle.js"> script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js.map"> script>
body>
这2个按钮覆盖住了整个swiper导致下面的内容无法点击。UI设计有问题，点击事件冲突了，没法区分是要切换图片还是点击焦点图中的内容
用z-index和pointer-events控制下事件穿透，增加下面2个样式即可
/*设置父容器层级高于prev、next按钮，同时设置穿透*/
.swiper-wrapper{z-index:5;pointer-events:none}
/*按钮容器设置鼠标捕获*/
.textbox {pointer-events: auto}
你的问题出现这2个身上
<div class="swiper-button-prev" id="swiper-slider-button-prev"></div>
<div class="swiper-button-next" id="swiper-slider-button-next"></div>
这2个的高度是100%，这2个有定位，但是a标签本身，以及他父标签却都没有定位
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！