内容滑块CSS z-index属性在Edge浏览器中无法正常工作

Question

由于某些原因，z-index属性在Edge浏览器中无法正常工作，该浏览器应显示我在完全不透明度下悬停的箭头，直到删除为止。例如，当我第二次单击箭头以查看下一张幻灯片时，在我再次移动鼠标之前，当前箭头的完全不透明度不会打开。我想知道是否可以保持当前箭头完全不透明度，直到鼠标指针不再悬停在箭头上？

我想知道是否有一种方法可以为Edge浏览器解决这个问题，因为在所有其他浏览器中，这都能完美地工作。

这是Jsfidle的链接https://jsfiddle.net/ef2bvkqb/

HTML

<form class="sliders">
    <input type="radio" name="slider-choice" id="first-slider" checked />
    <div class="slider-container">
        <div class="slider">
            <p>Some Random Text...</p>
        </div>
        <div class="nav">
            <label for="second-slider" class="prev"></label>
            <label for="second-slider" class="next"></label>
        </div>
    </div>
    <input type="radio" name="slider-choice" id="second-slider" />
    <div class="slider-container">
        <div class="slider">
            <p>Even Some More Random Text...</p>
        </div>
        <div class="nav">
            <label for="first-slider" class="prev"></label>
            <label for="first-slider" class="next"></label>
        </div>
    </div>
</form>

CSS

.sliders {
    width: 600px;
    position: relative;
}
.sliders input{ 
    display: none; 
}
.slider {
    position: absolute;
    opacity: 0;
    width: 600px;
    transform: scale(0);
    transition: all .6s ease-in-out;
}
.nav label {
  margin-top: 65px;
    width: 85px;
    display: none;
    position: absolute;
    opacity: 0;
    cursor: pointer;
    transition: opacity .2s;
    color: black;
    font-size: 6em;
    text-align: center;
    background-color: rgba(100, 100, 100, .6);
    Z-index: 99999;
}
.sliders:hover .nav label{
    opacity: 0.5;
    cursor: pointer;
}
.sliders:hover .prev:hover, .sliders:hover .next:hover{
    opacity: 1;
}
.nav .next{ 
    right: 0;
}
.prev:before{
    content: '2770';
}
.next:before{
    content: '2771';
}
input:checked + .slider-container .slider{
    opacity: 1;
    transform: scale(1);
    transition: opacity 2s ease-in-out;
}
input:checked + .slider-container .nav label{ 
    display: block; 
}
p{
    padding: 100px 20px;
    width: 560px;
    text-align: center;
    background: #dae1ef;
}

Answer 1

之所以会发生这种情况，是因为箭头在每张幻灯片内，我的意思是每张幻灯片都有自己的箭头。

你需要把箭头放在幻灯片外面，只需要一对箭头，你就需要使用JavaScript，而不是只使用CSS3来制作动画。