how can change another classes with hover with one class? without js, just css

Question

good time. I have several tags with right classes and I want to apply the style I want to the rest of the right classes when I hover over at least one of these divs.(remember that i cant change html files, just css file.) here see the pic.

body {
  margin: 0;
}

#container {
  position: relative;
  background-color: #d5d8dc;
  margin-top: 100px;
  margin-left: 100px;
  width: 400px;
  height: 400px;
}

.right {
  background-color: #2ecc71;
  position: absolute;
  width: 320px;
  height: 40px;
}

.right:nth-child(1) {
  left: 20%;
}

.right:nth-child(2) {
  transform: rotate(90deg);
  right: -140px;
  top: 140px;
}

.right:nth-child(3) {
  left: 20%;
  bottom: 20%;
}

.right:nth-child(4) {
  transform: rotate(90deg);
  right: +140px;
  top: 140px;
  z-index: 2;
}

.left {
  background-color: #e74c3c;
  position: absolute;
  width: 320px;
  height: 40px;
}

.left:nth-child(5) {
  left: 0;
  top: 20%;
}

.left:nth-child(6) {
  transform: rotate(90deg);
  right: -60px;
  top: 220px;
}

.left:nth-child(7) {
  left: 0;
  bottom: 0;
}

.left:nth-child(8) {
  transform: rotate(90deg);
  left: -140px;
  top: 220px;
}

.left:hover {
  z-index: 3;
}

.right:hover {
  z-index: 3;
}

<div id="container">
  <div class="right"></div>
  <div class="right"></div>
  <div class="right"></div>
  <div class="right"></div>
  <div class="left"></div>
  <div class="left"></div>
  <div class="left"></div>
  <div class="left"></div>
</div>

Do you only need the right green square to be in front when it's hovered or do you want to apply it for the left red square as well ? — Cédric
– Cédric, Commented Dec 23, 2022 at 8:59

Cédric · Accepted Answer · 2022-12-23 09:02:19Z

You could do it on the container like this:

#container:hover .right {
  background-color: yellow;
}

body {
  margin: 0;
}

#container {
  position: relative;
  background-color: #d5d8dc;
  margin-top: 100px;
  margin-left: 100px;
  width: 400px;
  height: 400px;
}

.right {
  background-color: #2ecc71;
  position: absolute;
  width: 320px;
  height: 40px;
}

.right:nth-child(1) {
  left: 20%;
}

.right:nth-child(2) {
  transform: rotate(90deg);
  right: -140px;
  top: 140px;
}

.right:nth-child(3) {
  left: 20%;
  bottom: 20%;
}

.right:nth-child(4) {
  transform: rotate(90deg);
  right: 140px;
  top: 140px;
  z-index: 2;
}

.left {
  background-color: #e74c3c;
  position: absolute;
  width: 320px;
  height: 40px;
}

.left:nth-child(5) {
  left: 0;
  top: 20%;
}

.left:nth-child(6) {
  transform: rotate(90deg);
  right: -60px;
  top: 220px;
}

.left:nth-child(7) {
  left: 0;
  bottom: 0;
}

.left:nth-child(8) {
  transform: rotate(90deg);
  left: -140px;
  top: 220px;
}

#container:hover .right {
  background-color: yellow;
}

<div id="container">
  <div class="right"></div>
  <div class="right"></div>
  <div class="right"></div>
  <div class="right"></div>
  <div class="left"></div>
  <div class="left"></div>
  <div class="left"></div>
  <div class="left"></div>
</div>

(Codepen)

Or if you just want to hover on the .right divs then the only way to do that with CSS-only is with modern selectors like :has() like this

#container:has(.right:hover) .right {
  background-color: purple;
}

body {
  margin: 0;
}

#container {
  position: relative;
  background-color: #d5d8dc;
  margin-top: 100px;
  margin-left: 100px;
  width: 400px;
  height: 400px;
}

.right {
  background-color: #2ecc71;
  position: absolute;
  width: 320px;
  height: 40px;
}

.right:nth-child(1) {
  left: 20%;
}

.right:nth-child(2) {
  transform: rotate(90deg);
  right: -140px;
  top: 140px;
}

.right:nth-child(3) {
  left: 20%;
  bottom: 20%;
}

.right:nth-child(4) {
  transform: rotate(90deg);
  right: 140px;
  top: 140px;
  z-index: 2;
}

.left {
  background-color: #e74c3c;
  position: absolute;
  width: 320px;
  height: 40px;
}

.left:nth-child(5) {
  left: 0;
  top: 20%;
}

.left:nth-child(6) {
  transform: rotate(90deg);
  right: -60px;
  top: 220px;
}

.left:nth-child(7) {
  left: 0;
  bottom: 0;
}

.left:nth-child(8) {
  transform: rotate(90deg);
  left: -140px;
  top: 220px;
}

#container:has(.right:hover) .right {
  background-color: purple;
}

<div id="container">
  <div class="right"></div>
  <div class="right"></div>
  <div class="right"></div>
  <div class="right"></div>
  <div class="left"></div>
  <div class="left"></div>
  <div class="left"></div>
  <div class="left"></div>
</div>

(Codepen)

But the :has() selector is yet to land in Firefox, but hopefully soon. https://caniuse.com/css-has

I edited your answer so that it contains your code so if the pen are changed or deleted the code will still be available here

Cédric · Accepted Answer · 2022-12-23 09:28:17Z

In addition to Glenn Flannagan answer, If you want to make the green square (.right) in front only when it's hovered (not when the container is hovered), you don't need to use has, you could change left z-index using the ~ sibling selector.

body {
  margin: 0;
}

#container {
  position: relative;
  background-color: #d5d8dc;
  margin-top: 100px;
  margin-left: 100px;
  width: 400px;
  height: 400px;
}

.right {
  background-color: #2ecc71;
  position: absolute;
  width: 320px;
  height: 40px;
  z-index: 1;
}

.right:nth-child(1) {
  left: 20%;
}

.right:nth-child(2) {
  transform: rotate(90deg);
  right: -140px;
  top: 140px;
}

.right:nth-child(3) {
  left: 20%;
  bottom: 20%;
}

.right:nth-child(4) {
  transform: rotate(90deg);
  right: +140px;
  top: 140px;
  z-index: 3;
}

.left {
  background-color: #e74c3c;
  position: absolute;
  width: 320px;
  height: 40px;
  z-index: 2;
}

.left:nth-child(5) {
  left: 0;
  top: 20%;
}

.left:nth-child(6) {
  transform: rotate(90deg);
  right: -60px;
  top: 220px;
}

.left:nth-child(7) {
  left: 0;
  bottom: 0;
}

.left:nth-child(8) {
  transform: rotate(90deg);
  left: -140px;
  top: 220px;
}

.right:hover~.left {
  z-index: 0;
}

<div id="container">
  <div class="right"></div>
  <div class="right"></div>
  <div class="right"></div>
  <div class="right"></div>
  <div class="left"></div>
  <div class="left"></div>
  <div class="left"></div>
  <div class="left"></div>
</div>

Note that if you want to change the .right style you will need to select previous elements in some case (which is not well supported)

Collectives™ on Stack Overflow

how can change another classes with hover with one class? without js, just css

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related