title: CSS hover two elements
body: <p>I have these 3 divs:</p>
  <p><a href="https://i.stack.imgur.com/pYy2m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pYy2m.png" alt="enter image description here" /></a></p>
  <p>The red one is absolute positioned.
  I'm trying to change the border color when hovering.</p>
  <p>The problem is that there is a precedence by the rendering order (which can be altered using z-index).
  But I want to trigger the hover effect on all hovered elements.</p>
  <p>In this example - I want the green area to trigger hover of both red and blue, and hovering the yellow area to trigger hover of purple and red.</p>
  <p>When hovering the blue div that doesn't overlap, I want only the blue to be &quot;hovered&quot; (same goes for the red and purple divs)</p>
  <p>Is that possible?</p>