JSFiddle - React, Tailwind, and code Playground

by Helmut Granda

HTML

<div id="parent">
<div>
  <div id="a" class="hovered">Div A</div>
  <div id="b"  class="hovered">Div B</div>
  <div id="d"  class="hovered">Div D</div>
  <div id="c" class="hovered">Div C</div>
</div>

<div>
  <div id="a" class="hovered">Div A</div>
  <div id="b"  class="hovered">Div B</div>
  <div id="d"  class="hovered">Div D</div>
  <div id="c" class="hovered">Div C</div>
</div>

</div>

CSS

/* #a:hover + #b {
    background: #ccc
} */
/* 
#a:hover ~ #b, #a:hover ~ #c, #a:hover {
  background: red;
} */

.hovered {
  background: teal;
}

#parent:hover .hovered {
  background: red;
}