Product change on click

Question

I am building a store website and I have problem with variations of the products. So I have the main product. I have 3 boxes with variations on color and when I hover them it changes the color, but the update of the site requires from me to change it from hoverable to clickable. It works when I change the CSS from

img:hover

to

img:active

but after the click the color returns to previous one. So can after click of the color to remain there instead of going back to previous color. And can it be done without JAVASCRIPT

It can be done using CSS with hackable approach using `:target` or `:checked` but I would recommend JavaScript which is quite straight forward than the css solution. — Mr_Green, Sep 29 '17 at 09:16
Duplicate of https://stackoverflow.com/questions/16511723/how-do-i-make-my-html5-nav-li-tab-stay-active-on-click-with-css3 — GolezTrol, Sep 29 '17 at 09:18

score 0 · Answer 1 · answered Sep 29 '17 at 09:19

0

.box {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #F4F4F4;
}
.box label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.box input {
  visibility: hidden;
}
.box input:checked + label {
  background-color: red;
}

<div class="box">
  <input type="checkbox" id="test">
  <label class="color" for="test"></label>
</div>

answered Sep 29 '17 at 09:19

Nick De Jaeger

1,247
10
13

How did you post after I closed this post? – Mr_Green Sep 29 '17 at 09:20
I'm Awesome. No idea. – Nick De Jaeger Sep 29 '17 at 09:22
Great.. I didn't downvote though. You can make it better by wrapping the input inside a label element instead of placing the label adjacent to the input. If you don't know that you can refer the MDN docs for label element. – Mr_Green Sep 29 '17 at 09:28
Interesting solution! I'd make it a radiobutton, though, so it would automatically be deselected when you selected another one. But essentially the solution stays the same. You'd have to give the element a name to to indicate which radios are grouped together: `type="radio" name="product"` – GolezTrol Sep 29 '17 at 11:48
Thanks! Yes indeed, could be a good workflow. Anyway, the basics are put, it's up the one another how to fill in the details :) – Nick De Jaeger Sep 29 '17 at 11:50

score -1 · Answer 2 · answered Sep 29 '17 at 09:16

:active means "while being clicked on", not "has been clicked on in the past". It is designed for such things as creating a 3D button depresses when you click on it effect.

CSS has no means to track state.

You might be able to hack something using :focus, but that is designed to indicate what you will activate if you were to press Enter, so is almost never a good choice for this sort of thing. It also only allows you to have one thing focused at a time.

If you want to track state for interactive things: use JavaScript.

CSS is not designed for that.

That's not expressly true but all JS free solutions feel a bit hacky. — Andrew Bone, Sep 29 '17 at 09:22

Product change on click

2 Answers2