CSS hover apply to parent elements

CSS hover apply to parent elements.md

.parent {
    background: white;
    pointer-events: none; // this disable the hover on the .parent

    &:hover {
      background: gray; // hover applied to .parent but disabled by the previous pointer-events: none;
    }
    a {
      pointer-events: auto; // this enable the pointer again
      &:hover {
        color: red; // this hover only for the a 
      }
    }
}

<span class="parent">
  text
  <a href="/link.html">x</a>
</span>