CSS: activo solo funciona durante un clic

Question

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>

html css

1

Mercer 9 may. 2019 a las 15:00

Answer 1

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>

4

Arindam Sarkar 9 may. 2019 a las 12:10

Answer 2

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

2

Quentin 9 may. 2019 a las 12:04

Answer 3

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>

1

Heretic Monkey 9 may. 2019 a las 12:09

Answer 4

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.

0

WebCoder 9 may. 2019 a las 12:09

CSS: activo solo funciona durante un clic

4 respuestas

Preguntas relacionadas

Nuevas preguntas

html