我有个cat Owl carousel
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
})body {
background-color: teal;
}
.owl-carousel {
background-color: orange;
}
.owl-carousel .item {
height: 200px;
transition: transform 0.5s;
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
z-index: -1;
}
.owl-carousel .item:hover {
transition: transform 0.5s;
-ms-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
z-index: 9999;
}
.owl-carousel .item-inner-wrapper {
position: relative;
}
.owl-carousel h4:hover {
background-color: red;
}
.owl-carousel h4 {
background-color: yellow;
height: 100px;
}
.owl-carousel.owl-theme .owl-nav {
margin-top: -90px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel owl-theme">
<div class="item">
<div class="item-inner-wrapper">
<h4>1</h4>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>2</h4>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>3</h4>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>4</h4>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>我想在悬停项目上制作一个动画，我制作了那个动画，但问题是，动画需要在 carousel 的所有其他部分上重叠悬停项目.
目前，动画尊重 carousel 中存在的"顺序"，也就是说，如果我们将鼠标悬停在第二项上，它将显示在第三项的下方，第一项的上方.
理想情况下，第二个项目将显示在 carousel 的所有其余部分的顶部
我try 使用z-index，但问题依然存在.
我该怎么解决呢？我需要重叠悬停的项目