注意：为了澄清起见，我之前曾发布过此问题，但我更改了演示，以便当我的真实示例使用.owl-stage-outer时display: flex;使用display: block;最终改变了接受答案的结果。 （我想知道为什么有人可以解释，这似乎是一个棘手的Z索引情况）
原始问题：
我正在使用猫头鹰转盘，并尝试修改.owl-nav按钮，以便仅当用户将鼠标悬停在滑块上时它们才会出现在转盘的侧面。我已经编写了以下CSS，但问题是.owl-nav阻止了滑块项并阻止用户单击它们。我是否有办法将.owl-nav移到.owl-stage-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%;
padding: 100px 0;
display: block;
text-align: center;
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>