Z-Index a Div (0) 在其兄弟 (1) 之后，同时保持 Children 在 (2) 以上 | OwlCarousel 导航箭头仅在悬停时

Question

我正在使用 owl 旋转木马并尝试修改 .owl-nav 按钮，以便仅当用户将鼠标悬停在滑块上时它们才会出现在旋转木马的两侧。我写了以下 CSS 但问题是 .owl-nav 阻止了滑块项并阻止用户单击它们。有没有办法让我将 .owl-nav 移到 .owl-staging-outer 后面，同时仅当用户将鼠标悬停在滑块上时仍然能够显示导航菜单项？

.wrapper {
  position: relative;
}

.owl-nav {
    z-index: 0;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}

.owl-next, .owl-prev {
    z-index: 100;
    position: absolute;
    width: 40px;
    height: 100px;
    display: inline-block;
    background: #000;
    top: 25%;
}

.owl-stage-outer {
 background: #f4f4f4;
 width: 100%;
 height: 200px;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 0;
}

.owl-next {
    right: 0;
    content: ">";
    color: #fff;
    font-size: 2em;
}

.owl-prev {
    left: 0;
    content:  "<";
    color: #fff;
    font-size: 2em;
}

.owl-nav .owl-next,
.owl-nav .owl-prev {
    visibility: hidden;
}

.owl-nav:hover .owl-next,
.owl-nav:hover .owl-prev {
    visibility: visible;
}

<div class="wrapper">
  <div class="owl-stage-outer"><a href="#">I want to be clicked!</a></div>
<div class="owl-nav">
  <button type="button" role="presentation" class="owl-prev disabled">
    <span aria-label="Previous">‹</span>
  </button>
  <button type="button" role="presentation" class="owl-next">
    <span aria-label="Next">›</span>
  </button>
</div>
</div>

Answer 1

不要为owl-stage-outer设置任何z-index，只需调整其他元素的z-index:

.wrapper {
  position: relative;
}

.owl-nav {
    z-index: 0;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}

.owl-next, .owl-prev {
    z-index: 100;
    position: absolute;
    width: 40px;
    height: 100px;
    display: inline-block;
    background: #000;
    top: 25%;
}

.owl-stage-outer {
 background: #f4f4f4;
 width: 100%;
 height: 200px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.owl-stage-outer > * {
  z-index:1;
}

.owl-next {
    right: 0;
    content: ">";
    color: #fff;
    font-size: 2em;
}

.owl-prev {
    left: 0;
    content:  "<";
    color: #fff;
    font-size: 2em;
}

.owl-nav .owl-next,
.owl-nav .owl-prev {
    visibility: hidden;
}

.owl-nav:hover .owl-next,
.owl-nav:hover .owl-prev {
    visibility: visible;
}

<div class="wrapper">
  <div class="owl-stage-outer"><a href="#">I want to be clicked!</a></div>
<div class="owl-nav">
  <button type="button" role="presentation" class="owl-prev disabled">
    <span aria-label="Previous">‹</span>
  </button>
  <button type="button" role="presentation" class="owl-next">
    <span aria-label="Next">›</span>
  </button>
</div>
</div>

Z-Index a Div (0) 在其兄弟 (1) 之后，同时保持 Children 在 (2) 以上 | OwlCarousel 导航箭头仅在悬停时

Z-Index a Div (0) Behind its Sibling (1) while Keeping Children Above (2) | OwlCarousel Navigation Arrows Only on Hover

html

css

z-index

owl-carousel

owl-carousel-2