es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo hacer que a:hover funcione con envoltorios de contenido.

21 Jul, 2023 Programación

Tengo problemas con los envoltorios de contenido ya que están impidiendo que mis interacciones de “hover” funcionen.
El objetivo es lograr que el div con la clase “card” tenga una interacción cuando el ratón pasa por encima de él.

.card {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid blue;
  overflow: hidden;
}

.card>div {
  height: 100%;
  width: 100%;
}

.card .foreground {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateX(100%);
  background-color: blue;
  transition: .5s ease;
}

.card:hover .foreground {
  transform: translateX(0);
}

<div class='card'>
  <div class='foreground'> </div>
  <div class='background'> </div>
</div>

Toda la información está aquí:

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para solucionar el problema donde los contenedores de contenido están impidiendo que funcionen las interacciones con el hover, se puede intentar eliminar la propiedad overflow: hidden; de la clase .card en el CSS. Esto permitirá que el evento de hover se propague al contenido dentro del div.

    Otra opción podría ser agregar pointer-events: none; a la clase .foreground en el CSS. Esto permitirá que el puntero del mouse interactúe con el div detrás del div foreground, permitiendo así que la interacción con el hover funcione correctamente.

    Usar una de estas soluciones debería solucionar el problema y permitir que el div con la clase card tenga una interacción cuando el mouse se coloque sobre él.

Comments are closed.