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