He montado un escenario de pruebas y parecías estar teniendo un problema de especifidad con tus reglas CSS.
Bootstrap configura propiedades para los elementos .carousel-control-next
y .carousel-control-prev
, seleccionando al elemento mediante la id
del carousel (además de por la clase a la que se pretende afectar) estoy añadiendo más especifidad a mi regla que la que pone Bootstrap, por lo que de esa manera consigo sobreponerme a ellas y ponerle al elemento los estilos deseados.
#carouselExampleControls .carousel-control-next,
#carouselExampleControls .carousel-control-prev {
opacity: 0 ;
}
#carouselExampleControls .carousel-control-next:hover,
#carouselExampleControls .carousel-control-prev:hover {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://xn--quesoe-0wa.com/wp-content/uploads/so%C3%B1ar-con-gatitos-1250x834.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://xn--quesoe-0wa.com/wp-content/uploads/so%C3%B1ar-con-gatitos-1250x834.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://xn--quesoe-0wa.com/wp-content/uploads/so%C3%B1ar-con-gatitos-1250x834.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Referencia: especifidad CSS
hover
solamente actúa cuando el ratón está posicionado encima del elemento. Si se te produce el comportamiento que nos comentas es porque está actuando algo más que no aparece en los que nos has mostrado.