时间戳

首页 > 解决方案 > 使元素显示在轮播上方

javascript - 使元素显示在轮播上方

问题描述

我有一个旋转木马，使用owlCarousel，我正在尝试使旋转木马中的元素在悬停时展开。它的实现方式是displayed: none默认情况下，然后在悬停时显示为阻止。没有什么花哨。

它通过绝对定位从流程中取出，这样轮播就不会在元素悬停时展开。

问题是，当元素悬停时，细节，展开的元素不显示。我试着给它一个 high z-index，但它似乎并没有解决问题。这是代码：

代码笔文件

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
})
body {
  background-color: teal;
}

.owl-carousel {
  background-color: orange;
}

.owl-carousel .item:hover .details {
  display: block;
}

.owl-carousel .item-inner-wrapper {
  position: relative;
}

.owl-carousel h4 {
  background-color: yellow;
  height: 100px;
}

.owl-carousel .details {
  background-color: pink;
  height: 300px;
  position: absolute;
  top: 100%;
  bottom: 0;
  right: 0;
  left: 0;
  display: none;
  z-index: 20;
}
<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 class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>2</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>3</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>4</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>5</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>6</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>7</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>8</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>9</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>10</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>11</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>12</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

标签： javascriptjqueryhtmlowl-carouselowl-carousel-2

解决方案

看看这是否适合你：

  1. 设置.owl-carousel .item为您的content height + detail height（我使用 200px）

  2. 一组margin-top到（原来.owl-carousel.owl-theme .owl-nav是）-(detail height) + 10px10px

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 3
    },
    1000: {
      items: 5
    }
  }
})
body {
  background-color: teal;
}

.owl-carousel {
  background-color: orange;
}

.owl-carousel .item {
  height: 200px;
}

.owl-carousel .item:hover .details {
  display: block;
}

.owl-carousel .item-inner-wrapper {
  position: relative;
}

.owl-carousel h4 {
  background-color: yellow;
  height: 100px;
}

.owl-carousel .details {
  background-color: pink;
  height: 100px;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: none;
}

.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 class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>2</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>3</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>4</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>5</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>6</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>7</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>8</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>9</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>10</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>11</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner-wrapper">
      <h4>12</h4>
      <div class="details">
        This is some crazy cool details that you will have to know about
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

推荐阅读