I created a Bootstrap 4.1.0 carousel with Font Awesome controls positioned outside the images using CSS. However, when hovering over the control arrows, they disappear. Here is a link to the codepen I created: https://codepen.io/mlegg10/pen/qYEegR Could someone advise me on how to fix this issue so that the carousel controls don't vanish when hovered over? Thank you.
<script> $('.carousel').carousel()</script>
.carousel {
background:#F5F5F5;
}
.carousel-item .img-fluid {
width:80%;
height: 80%;
}
.carousel-item a {
display: block;
width:90%;
height: 90%;
}
.carousel-control-prev {
color:#036;
margin-left: -1rem;
z-index: 10;
}
.carousel-control-next {
color:#036;
margin-right: -1rem;
z-index: 10;
}
.carousel-controls a:hover {
color: 004289;
z-index: 10;
}
<div id="carouselExampleControls" class="carousel slide align-items-center" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block mx-auto img-fluid" src="http://nationalkitchencabinets.com/slides/A1.jpg" alt="A1">
</div>
<div class="carousel-item">
<img class="d-block mx-auto img-fluid" src="http://nationalkitchencabinets.com/slides/A2.jpg" alt="A2">
</div>
<div class="carousel-item">
<img class="d-block mx-auto img-fluid" src="http://nationalkitchencabinets.com/slides/A3.jpg" alt="A3">
</div>
<div class="carousel-item">
<img class="d-block mx-auto img-fluid" src="http://nationalkitchencabinets.com/slides/A4.jpg" alt="A4">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<i class="fas fa-chevron-circle-left fa-lg"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next text-faded" href="#carouselExampleControls" role="button" data-slide="next">
<i class="fas fa-chevron-circle-right fa-lg"></i>
<span class="sr-only">Next</span>
</a>
</div>