Html Question posted in
Some basic documentation can be found here.

Html – Is there a purely CSS way to make something happen when you click (not click and hold) an element?

I think the best example of what I am thinking of would be like you click on an image and it changes the filter and that filter stays even if you’re not holding down on the image.

At first I thought maybe I could use the :active pseudo-class on an image to make it grayscale upon click as a test however it didn’t work. Then I tried making the image a link and doing

a:visited {
    filter:  grayscale(100%);
}

however, it did not work.

Tags:

2

Answers


  1. 0

    You can’t do that by pure CSS, but you can use a hidden checkbox to manipulate the image.

    input.hidden {
  display: none;
}

label > img {
  transition: filter 300ms;
  cursor: pointer;
}

input[type="checkbox"]:checked ~ label > img {
  filter: grayscale(1);
}
    <div>
  <input id="doggy" class="hidden" type="checkbox">
  <label for="doggy"><img src="https://picsum.photos/id/237/200/200"></label>
</div>
    Login or Signup to reply.
  2. 0

    Play with transition and you can simulate it:

    img {
  transition: 0s 9999s filter; /* a big delay on mouseout so it take a lot of time to change */
  cursor: pointer;
}

img:active {
  transition: 0s filter; /* instant change on click */
  filter: grayscale(1);
}
    <img src="https://picsum.photos/id/125/200/200">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search