JSFiddle - React, Tailwind, and code Playground

HTML

<span class="hider">
  Я родительский hider.
  <a href="http://google.com">Эту ссылку должно быть видно.</a> 
  Я продолжение родительского hider.
    <span class="hider">
      Я дочерний hider.
      <b>
        <a href="http://google.com">Меня не должно быть видно при наведении курсора на родителя.</a>
        Я дочерний hider.
      </b>
    </span>
  Я продолжение родительского hider.
</span>

CSS

.hider {
  background-color: gray;
  -webkit-text-fill-color: transparent;
  padding: 7px;
  line-height: 1.5em;
}

.hider:hover {
  -webkit-text-fill-color: unset;
}