Quiero mantener la estrella amarilla cuando hago clic en ella y deselecciono el color cuando vuelvo a hacer clic.
Intento usar la opción :active
.
.fave {
width: 70px;
height: 50px;
background: url(https://cssanimation.rocks/images/posts/steps/twitter_fave.png) no-repeat;
background-position: 0 0;
}
.fave:hover {
background-position: -3519px 0;
transition: background 1s steps(55);
}
<div class="fave"></div>
4 respuestas
Puede intentar esto utilizando la casilla de verificación si desea hacerlo con NO js solo css
[type="checkbox"]{
display:none;
}
.fave {
width: 70px;
height: 50px;
background: url(https://cssanimation.rocks/images/posts/steps/twitter_fave.png) no-repeat;
background-position: 0 0;
display: inline-block;
}
[type="checkbox"]:checked ~ .fave {
background-position: -3519px 0;
transition: background 1s steps(55);
}
<input type="checkbox" id="cb1">
<label class="fave" for="cb1"></label>
:active
significa mientras se mantiene presionado el botón (o tecla) del mouse.
No es un estado de alternancia.
CSS no tiene ningún mecanismo para agregar un estado de alternancia.
Para eso necesitará una casilla de verificación (que puede combinar con la pseudoclase :checked
) y / o JavaScript (los detalles dependiendo de la semántica que está tratando de expresar).
Creo que quieres algo como esto
jQuery(document).ready(function() {
jQuery(".fave").click(function() {
jQuery(this).toggleClass("active");
})
})
.fave {
width: 70px;
height: 50px;
background: url(https://cssanimation.rocks/images/posts/steps/twitter_fave.png) no-repeat;
background-position: 0 0;
}
.fave:hover,
.fave.active {
background-position: -3519px 0;
transition: background 1s steps(55);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fave"></div>
Puede hacer esto solo con JavaScript. Es capaz de crear código CSS con : foco o : activo pseudo elementos. Pero con esto puede establecer el color solo cuando se hace clic. Si desea deseleccionar el color al hacer clic en contra, debe hacerlo a través de js. Puedo hacer un fragmento de código si quieres.
Preguntas relacionadas
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].