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 {
  color: gray;
  background-color: gray;
  padding: 7px;
  line-height: 1.5em;
}
.hider a {
  color: gray;
}

.hider:hover {
  color: white;
}

.hider:hover a {
  color: blue;
}