1

Hola comunidad buenas tardes.

Al dar click en un elemento con :hover se queda el efecto aplicado una vez quitando el puntero del mouse de este. Estoy trabajando con un carousel de bootstrap.

<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>

.carousel-control-next{
    opacity: 0;
}
.carousel-control-next:hover{
    opacity: 1;
}

introducir la descripción de la imagen aquí

2
  • Solamente con los CSS que nos muestras es imposible saber lo que te está ocurriendo, ya que la pseudo-clase 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.
    – phpMyGuel
    el 1 ago. 2019 a las 7:54
  • Hola, muchas gracias por tu observación, agregué la parte donde bootstrap menciona los tags, realmente no tengo nada de código en los estilos, así que no está aplicando ninguna otra clase sobre el. He buscado más información pero no he logrado sacar el bug. Gracias!!!!!!
    – swgarz
    el 1 ago. 2019 a las 17:27

1 respuesta 1

0

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

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.