Trigger different hover states for two elements at the same time-CodePudding

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 >
  <div >
    b
  </div>
  <div >
    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;
}

CodePudding user response：

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 >
  <div ></div>
  <div >
    b
  </div>
  <div >
    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;
}