CSS viewing trouble? - html

Question

I have a problem when I click an arrow a second time to view the next slide the arrow disappears until I move the mouse again. I was wondering if it's possible to keep the arrow in view like the first click when the pointer is hovering over the arrows.
Here is the link to the Jsfiddle https://jsfiddle.net/2hmb60w0/
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);
}
.slider:hover + .nav label, .slider:focus + .nav label{
opacity: 0.6;
}
.nav label:hover, .nav label:focus{
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

Add a z-index to the nav label to fix this
.nav label {
...
z-index: 9999;
}

Answer 2

If you change the opacity of the .nav label you can have the arrow show up at any level all the time:
.nav label {
margin-top: 65px;
width: 85px;
display: none;
position: absolute;
opacity: 0.5; //I set this to 0.5 (50%), so it is always visible.
//moving the mouse will make it more solid though
cursor: pointer;
transition: opacity .2s;
color: black;
font-size: 6em;
text-align: center;
background-color: rgba(100, 100, 100, .6);
}
Is that what you wanted to do?

Answer 3

I figured it out what I needed to do. Here is what I added to solve my problem.
CSS
.sliders:hover .nav label{
opacity: 0.5;
}