Hover state on parent selector to control child element

[jesders]

I would like the ability to have a hover state on a parent selector and control a child element. This would be really helpful with navigations, cards, etc.

Example:

<div>
  <a href="{{ LINK }}" class="nested-hover:child nested-hover:border-orange">
    {{-- Hovering <a> above will control the child element below. --}}
    {{-- In this change the border color on child when you hover on parent --}}
    <div class="border-black child">test</div>
  </a>
</div>