title: Emulate Inspector highlight on hover
body: <p>I am trying to emulate the <strong>Chrome/Firefox Inspector Highlighting</strong> effect using just CSS. I can achieve it relatively well but...</p>
  
  <p>If a child element is hovered, its parent is highlighted aswell. Do you know how I can fix this? In the below example hover over the header and you will see pretty much everything is highlighted. Only the header should be red.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*:hover {
    position: relative;
  }
  
  *:hover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,0,0,0.25);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main style="height: 600px; position: relative;"&gt;
    &lt;header style="height: 100px;"&gt;Title&lt;/header&gt;
    
    &lt;footer style="height: 100px; position: absolute; bottom: 0; width: 50%;"&gt;Footer&lt;/footer&gt;
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>