JSFiddle - React, Tailwind, and code Playground

by R K

HTML

<div class="element1">Element 1</div>
<div class="element2">
  <p class="child">
    <span class="grandchild">Element 2</span>
  </p>
  <p class="child2"></p>
</div>
<div class="element3">Element 3</div>

CSS

body div {
    pointer-events: auto;
}
body div.element3 {
    pointer-events: none;
}
body {
    pointer-events: none;
}
body:hover div {
    background: red;
}
body:hover div:hover {
    background: none;
}

body:hover div.element3 {
    background: none;
}