-1

Quiero saber como puedo activar el card hover con un botón e buscado y no e podido encontrar un ejemplo claro ni se como empezar a codificarlo.

Tengo esta imagen de ejemplo.

introducir la descripción de la imagen aquí

1
  • Por favor agrega tu código así como lo que hayas intentado
    – user128299
    Commented el 30 mar. 2020 a las 4:48

1 respuesta 1

1

Intenta poner un input type="checkbox y enlazar un elemento label a él, el elemento label será el que luzca como el botón. La razón de poner un checkbox es porque mediante la pseudo clase :checked te puede ayudar a detectar si el botón está activo o no y, con base en ello, mostrar u ocultar el card hover.

.card {
  position: relative;
  max-width: 300px;
  padding: 50px;
  background: rgba(0, 0, 0, 0.15);
}

#hover-toggle {
  display: none;
}

.card__button {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  z-index: 3;
  background: black;
  cursor: pointer;
}

.card__hover {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: orange;
}

#hover-toggle:checked + .card__hover {
  display: block;
}
<div class="card">
  <div class="card__content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, incidunt. Ducimus fuga obcaecati, quo eveniet ut temporibus iste veniam eaque?</p>
  </div>
  <label for="hover-toggle" class="card__button"></label>
  <input type="checkbox" id="hover-toggle">
  <div class="card__hover" id="card-hover">
    <p>Card Hover</p>
  </div>
</div>

1
  • Es maravilloso que quieras aportar pero evitamos responder a preguntas de baja calidad ya que pueden terminar cerradas. En su lugar, orientamos al OP para que se más específico en su pregunta y si la cambia, procedemos a responder. Por favor, haz el recorrido para que conozcas cómo funciona la comunidad.
    – DjCrazy
    Commented el 30 mar. 2020 a las 12:57

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