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>

Unfortunately there is no `:clicked` equivalent to `:hover`. One workaround is to use checkboxes (you can make them transparent, they just have to be there to be checked or unchecked), you can then target the `:checked` status in the same way as you're doing for `:hover`. — delinear, Nov 21 '17 at 15:22
Possible duplicate of [How to affect other elements when a div is hovered](https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered) — Wing, Nov 21 '17 at 15:28

score 1 · Accepted Answer · answered Nov 21 '17 at 15:49

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.

I solved it in another way. With putting tabindex="0" on the "hover"-divs, and then using :focus in the CSS! But thank you so much for your help! — s.sand, Nov 21 '17 at 18:18

Billy Ferguson · Answer 2 · 2017-11-21T16:06:44.747

0

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.

edited Nov 21 '17 at 16:06

answered Nov 21 '17 at 15:20

Billy Ferguson

1,429
11
23

This should be a comment really, also it's not true you can achieve this without JS – Andrew Bone Nov 21 '17 at 15:38
Answer it then lol because I have never seen what OP is trying to do without JavaScript in my entire life. – Billy Ferguson Nov 21 '17 at 15:41
1

OMG. Wow. Never would have though to use a checkbox hack to simulate what you would do with a toggle in JavaScript. Nice job, I'm actually very impressed. – Billy Ferguson Nov 21 '17 at 15:54

score 0 · Answer 3 · answered Nov 21 '17 at 16:04

0

div:focus {
    background-color:red;
}


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

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

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

answered Nov 21 '17 at 16:04

X11STX

29
2

1

It's always a good idea to explain how or why this answers the question. Just pasting a block of code is generally not an acceptable answer. – theMayer Nov 21 '17 at 19:21

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

3 Answers3