How to make a div change color when you click another div using only css?

Question

I'm struggling with getting "athletic-choice" to change color when you click on "hover-athletic". I managed to make it change color on hover, but I would also like it to change color "permanently" when it's clicked. I can only use CSS, no jQuery.

The layout is built up by a photo(png) that looks like a triangle. The triangle is split into three different sections. Then I have the "choice"-divs that each cover one section behind the triangle-photo. On top of the triangle-photo there are "invisible" divs (the "hover"-divs) that can trigger the hover-effect on the "choice"-divs. I had to add these invisible divs since the hover didn't work on the "choice"-divs, since it's behind the photo (which they have to be to make the design look like I want).

Please help!

Code:

#triangle {
  position: absolute;
  width: 200px;
  left: 150px;
  top: 30px;
}

#hover-athletic {
  position: absolute;
  width: 200px;
  height: 115px;
  left: 150px;
  top: 30px;
}

#hover-athletic:hover~#athletic-choice {
  background-color: rgb(76, 76, 76);
}

#hover-slim {
  position: absolute;
  width: 100px;
  height: 70px;
  left: 150px;
  top: 145px;
}

#hover-slim:hover~#slim-choice {
  background-color: rgb(76, 76, 76);
}

#hover-fat {
  position: absolute;
  width: 100px;
  height: 70px;
  left: 250px;
  top: 145px;
}

#hover-fat:hover~#fat-choice {
  background-color: rgb(76, 76, 76);
}

#athletic-choice {
  background-color: rgb(25, 25, 25);
  position: absolute;
  width: 200px;
  height: 115px;
  left: 150px;
  top: 30px;
  z-index: -1;
}

#slim-choice {
  background-color: rgb(25, 25, 25);
  position: absolute;
  width: 100px;
  height: 70px;
  left: 150px;
  top: 145px;
  z-index: -1;
}

#fat-choice {
  background-color: rgb(25, 25, 25);
  position: absolute;
  width: 100px;
  height: 70px;
  left: 250px;
  top: 145px;
  z-index: -1;
}

<img id="triangle" src="../photos/triangle.png" alt="triangle">

<div id="hover-athletic"></div>
<div id="hover-slim"></div>
<div id="hover-fat"></div>

<div id="athletic-choice"></div>
<div id="slim-choice"></div>
<div id="fat-choice"></div>

Answer 1

You gotta use jQuery or something similar in order to change CSS. You can't just change stuff in the DOM without JavaScript unless you use a checkbox hack.

Answer 2

div:focus {
    background-color:red;
}


<div tabindex="1">
Section 1
</div>

<div tabindex="2">
Section 2
</div>

<div tabindex="3">
Section 3
</div>

Answer 3

I'm taking advantage of the CSS selector :checked and then I can use checkboxes as a place to store a boolean variable.

I've used checkboxes so all can be checked at the same time, but you can do a similar trick with radio button if you want one from a group.

label {
  display: block;
  width: 100%;
  height: 100%;
}

#triangle {
  position: absolute;
  width: 200px;
  left: 150px;
  top: 30px;
}

#hover-athletic {
  position: absolute;
  width: 200px;
  height: 115px;
  left: 150px;
  top: 30px;
}

#hover-athletic:hover~#athletic-choice,
#bool-athletic:checked~#athletic-choice {
  background-color: rgb(76, 76, 76);
}

#hover-slim {
  position: absolute;
  width: 100px;
  height: 70px;
  left: 150px;
  top: 145px;
}

#hover-slim:hover~#slim-choice,
#bool-slim:checked~#slim-choice {
  background-color: rgb(76, 76, 76);
}

#hover-fat {
  position: absolute;
  width: 100px;
  height: 70px;
  left: 250px;
  top: 145px;
}

#hover-fat:hover~#fat-choice,
#bool-fat:checked~#fat-choice {
  background-color: rgb(76, 76, 76);
}

#athletic-choice {
  background-color: rgb(25, 25, 25);
  position: absolute;
  width: 200px;
  height: 115px;
  left: 150px;
  top: 30px;
  z-index: -1;
}

#slim-choice {
  background-color: rgb(25, 25, 25);
  position: absolute;
  width: 100px;
  height: 70px;
  left: 150px;
  top: 145px;
  z-index: -1;
}

#fat-choice {
  background-color: rgb(25, 25, 25);
  position: absolute;
  width: 100px;
  height: 70px;
  left: 250px;
  top: 145px;
  z-index: -1;
}

<img id="triangle" src="../photos/triangle.png" alt="triangle">

<!-- Athletic -->
<input type="checkbox" id="bool-athletic" hidden>
<div id="hover-athletic">
  <label for="bool-athletic"></label>
</div>
<!-- Slim -->
<input type="checkbox" id="bool-slim" hidden>
<div id="hover-slim">
  <label for="bool-slim"></label>
</div>
<!-- Fat -->
<input type="checkbox" id="bool-fat" hidden>
<div id="hover-fat">
  <label for="bool-fat"></label>
</div>

<div id="athletic-choice"></div>
<div id="slim-choice"></div>
<div id="fat-choice"></div>

If you're interested in other tips and tricks to avoid JS I suggest you look here

I hope this helps.