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

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 ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

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 ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></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 ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

(Codepen)

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

CodePudding user response：

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 ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></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)