Hover Effect Not Affecting Chained Div

Issue

The problem consists of one div .hoverbox with hover style chained to another div .menubox.

But when I hover over .hoverbox nothing happening to .menubox.

Here is my code:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  margin: 0;
  width: 100%
}

.flowbox {
  display: block;
  background: #fff;
  aspect-ratio: 1/1;
  height: 90vh;
  border-radius: 5vh;
  z-index: 3;
}

.grid {
  display: grid;
  column-gap: 0;
  grid-template-columns: 25vh 90vh 25vh;
}

.hoverbox {
  display: block;
  border: 2px solid green;
  z-index: 10;
  background-color: #0080FF80;
}

.hoverbox:hover .menubox {
  transform: translateX(-40vh);
  background-color: #ff0000
}

.menubox {
  position: absolute;
  background-color: #e8e8e8;
  aspect-ratio: 1/1;
  height: 90vh;
  z-index: 0;
  transform: translateX(0);
  transition: transform 130ms ease-out;
}

<div class="menubox"></div>

<div class="grid">
  <div class="hoverbox"></div>
  <div class="flowbox"></div>
  <div class="hoverbox"></div>
</div>

I have used this method in the past, but now it's just stopped working, maybe because of grid?

Solution

For this, as you're trying to style an element by hovering over a child-element of a later-sibling, you'd need to use the :has() pseudo-class (though please pay attention to the compatibility problems, see the references):

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  margin: 0;
  width: 100%
}

.flowbox {
  display: block;
  background: #fff;
  aspect-ratio: 1/1;
  height: 90vh;
  border-radius: 5vh;
  z-index: 3;
}

.grid {
  display: grid;
  column-gap: 0;
  grid-template-columns: 25vh 90vh 25vh;
}

.hoverbox {
  display: block;
  border: 2px solid green;
  z-index: 10;
  background-color: #0080FF80;
}

.menubox {
  position: absolute;
  background-color: #e8e8e8;
  aspect-ratio: 1/1;
  height: 90vh;
  z-index: 0;
  transform: translateX(0);
  transition: transform 130ms ease-out;
}

/*
  here we select the .menubox element, when the parent has a descendant
  element of class '.hoverbox' that matches the :hover pseudo-class:
*/
body:has(.hoverbox:hover) .menubox {
  transform: translateX(-40vh);
  background-color: #ff0000;
}

<div class="menubox"></div>

<div class="grid">
  <div class="hoverbox"></div>
  <div class="flowbox"></div>
  <div class="hoverbox"></div>
</div>

JS Fiddle demo.

References:

• :has() compatibility.
• :has() pseudo-class.

Answered By - David Thomas