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 Zegna</p>
<h2 class="bannerh2-a970a30b-2acd-4572-8a1e-595a6a5492ff">The Triple Stitch™ Sneaker</h2>
<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 Zegna</p>
<h2 class="bannerh2-743ba934-86e3-44ef-9d67-342da5471cc4"><b>Outdoor Collection</b></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>
