CSS :active only works during a click - html

Question

I want to keep the star yellow when I click on it and deselected the color when I re-clicked.
I try to use the :active option.
.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>

Answer 1

your can try this by using checkbox if you want to do it with NO js only 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>

Answer 2

:active means while the mouse button (or key) is held down.
It is not a toggle state.
CSS has no mechanism for adding a toggle state.
For that you'll need a checkbox (which you can combine with the :checked pseudo-class) and/or JavaScript (the specifics depending on the semantics you are trying to express).

Answer 3

i think you want something like this
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>