javascript - 如何在悬停时重叠 Owl Carousel 中的元素？

Question

我有这个 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>

我想在悬停元素上制作动画，我做了那个动画，但问题是所述动画需要将悬停元素重叠在轮播的所有其余部分之上。

目前动画遵循轮播中存在的“顺序”，也就是说，如果我们将鼠标悬停在第二个元素上，它将显示在第三个元素下方和第一个元素上方。

理想情况下，第二个元素将显示在轮播的所有其余部分的顶部

我尝试使用 z-index 但问题仍然存在。

如何解决？我需要重叠悬停的元素

Answer 1

所以，实际上 z-index 是您需要的属性，但位置正确。我只在下面添加了这些属性，仅此而已。

.owl-item.active{z-index: 1;}

.owl-item.active:hover{z-index: 2;}

    $('.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;
    }
    .owl-item.active{
      z-index: 1;
    }

    .owl-item.active:hover{
        z-index: 2;
    }

<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>