CODEWITHSUNDEEP
htmlcss
Mercer
Mercer

Reputation: 9986

CSS :active only works during a click

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>

Upvotes: 1

Views: 2357

Answers (3)

Arindam Sarkar
Arindam Sarkar

Reputation: 224

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>

Upvotes: 4

vinay choudhary
vinay choudhary

Reputation: 184

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>

Upvotes: 1

Quentin
Quentin

Reputation: 943565

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

Upvotes: 2

Related Questions