Trigger different hover states for two elements at the same time

Question

Here's a fairly simple jsfiddle. When I over over the blue square, the blue square's CSS hover state triggers (causing it to turn white). When I hover over the red square, the same thing happens with the red square.

What I want is when I hover over the overlap, that I trigger the hover states on both the red and blue square. Is this possible?

Specifically, can I indicate somehow that a hover state should trigger, but that it should also pass through to any element behind it?

Additionally, I'd like to do this in pure CSS. I'm sure it can be done with JS.

(The real code is more complicated, of course.)

Here's the full code:

HTML:

<div class="a">
  <div class="b">
    b
  </div>
  <div class="c">
    c
  </div>
</div>

CSS:

.a {
  position: relative;
}

.b {
  width: 40px;
  height: 40px;
  top: 5px;
  left: 5px;
  position: absolute;
  background-color: blue;
}

.b:hover {
  background-color: white;
}

.c {
  width: 40px;
  height: 40px;
  top: 25px;
  left: 25px;
  position: absolute;
  background-color:red;
}

.c:hover {
  background-color: white;
}

The top answer on https://stackoverflow.com/questions/8579840/style-hover-state-of-element-when-hovering-over-overlapping-elements-with-css?rq=1 seems to be what you're looking for. — ps4star, Jan 30 '22 at 09:09
That's a fair point - I'll edit the question to indicate I want a CSS solution, since solving this with JS only is straightforward, but feels hacky. — thedayturns, Jan 30 '22 at 09:13
Does this answer your question? [Style hover state of element when hovering over overlapping elements with CSS](https://stackoverflow.com/questions/8579840/style-hover-state-of-element-when-hovering-over-overlapping-elements-with-css) — cloned, Jan 30 '22 at 09:16
Can't be done with css alone if I understand the question correctly — cloned, Jan 30 '22 at 09:16
"...but that it should also pass through to any element behind it?" Can explain what exactly what "behind" it is as it appears in HTML? Ex. above another tag or below, within or outside of? As a sibling, ancestor, or descendant? — zer00ne, Jan 30 '22 at 09:36

score 2 · Accepted Answer · answered Jan 30 '22 at 09:57

If you don't mind editing your HTML slightly, there is a way to do this by adding another div in the HTML and using the CSS general sibling combinator (~), but it's still quite hacky and mostly side-steps the problem.

It's just creating a third div, changing its box so that it sits right in the overlap between .b and .c, and selecting .b and .c when it's hovered in the CSS to edit their styles.

jsfiddle

HTML

<div class="a">
  <div class="overlap"></div>
  <div class="b">
    b
  </div>
  <div class="c">
    c
  </div>
</div>

CSS

.a {
  position: relative;
}

.b {
  width: 40px;
  height: 40px;
  top: 5px;
  left: 5px;
  position: absolute;
  background-color: blue;
}

.b:hover {
  background-color: white;
}


.c {
  width: 40px;
  height: 40px;
  top: 25px;
  left: 25px;
  position: absolute;
  background-color:red;
}

.c:hover {
  background-color: white;
}

.overlap {
  position: absolute;
  
  top: 25px;
  left: 25px;
  
  /* w = leftOfC - leftOfB
     h = topOfC - topOfB*/
  width: calc(25px - 5px);
  height: calc(25px - 5px);
  
  background-color: none;
  z-index: 2;
}

/* select .b and .c as siblings of the overlap div */
.overlap:hover ~ .b, .overlap:hover ~ .c {
  background-color: white;
}

Trigger different hover states for two elements at the same time

1 Answers1