Html Z索引一个Div（0）在它的兄弟（1）之后，同时保持子对象在（2）之上|猫头鹰旋转木马导航箭头仅处于悬停状态

我正在使用owl转盘，并试图修改

.owl nav

按钮，以便仅当用户将鼠标悬停在滑块上时，这些按钮才会显示在转盘的侧面。我已经编写了以下CSS，但问题是

.owl nav

阻止了滑块项目，并阻止用户单击它们。是否有一种方法可以让我将

.owl nav

移到

.owl staging outer

后面，同时仅当用户将鼠标悬停在滑块上时才能显示nav菜单项

.wrapper{
位置：相对位置；
}
.猫头鹰导航{
z指数：0；
身高：100%；
排名：0；
左：0；
右：0；
底部：0；
位置：绝对位置；
}
.owl next、.owl prev{
z指数：100；
位置：绝对位置；
宽度：40px；
高度：100px；
显示：内联块；
背景：#000；
最高：25%；
}
.猫头鹰舞台{
背景#f4；
宽度：100%；
高度：200px；
证明内容：中心；
对齐项目：居中；
显示器：flex；
z指数：0；
}
下一个是猫头鹰{
右：0；
内容：“>”；
颜色：#fff；
字号：2em；
}
.猫头鹰{
左：0；
内容：“不要为
owl stage outer
设置任何z索引，只需调整其他元素的z索引：


.wrapper{
位置：相对位置；
}
.猫头鹰导航{
z指数：0；
身高：100%；
排名：0；
左：0；
右：0；
底部：0；
位置：绝对位置；
}
.owl next、.owl prev{
z指数：100；
位置：绝对位置；
宽度：40px；
高度：100px；
显示：内联块；
背景：#000；
最高：25%；
}
.猫头鹰舞台{
背景#f4；
宽度：100%；
高度：200px；
证明内容：中心；
对齐项目：居中；
显示器：flex；
}
.owl舞台外部>*{
z指数：1；
}
下一个是猫头鹰{
右：0；
内容：“>”；
颜色：#fff；
字号：2em；
}
.猫头鹰{
左：0；
内容：“谢谢。我的笔记本电脑充电器刚出故障，但我会在安装新充电器时试用。更改演示代码是我的错，但在我的真实示例中，
。owl stage outer
不使用flex，而您的代码似乎只与flex一起工作。当它设置为
显示：block
时，如何使其工作？下面是一篇文章关于这个问题，也许你可以解释一下为什么会发生这种情况？@BlakeBell add position:relative to
.owl stage outer>*
，它也可以在没有Flex的情况下工作谢谢！这很有效..我知道这一个可能在推动它，但是有没有办法在链接悬停时保持.owl导航悬停效果处于活动状态？我注意到箭头diSapear当我将鼠标悬停在链接上并使用滑块时，整个部分基本上将是一组巨大的链接；这意味着用户在滑块项目上方移动鼠标时可能很难单击箭头。