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

Question

I am using owl carousel and trying to modify the .owl-nav buttons so that they appear on the sides of the carousel only if a user is hovering over the slider. I've written the following CSS but the problem is that .owl-nav is blocking the slider items and preventing users from clicking on them. Is there a way for me to move .owl-nav behind .owl-staging-outer while still being able to show the nav menu items only when the user hovers over the slider?

.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

Don't set any z-index for owl-stage-outer and simply adjust the z-index of the other elements:

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