Alternative to CSS :has pseudo-class?

Question

I have a top nav with black text.

On some of my pages, the nav is positioned over a dark full-screen hero image. In these cases I'd like my nav text to be white.

My HTML looks like this:

<nav>
    <ul>
        <li>My nav items...</li>
    </ul>
</nav>
<div class="hero"></div>

And basically I want to do this:

nav {
    color: black;
}

// if there is a hero image in the background
nav:has(+ .hero) {
    color: white;
}

The problem is that the :has pseudo-class is not supported by any browser (caniuse).

Is there a way to do this in CSS and without altering the HTML layout? (in reality it's a bit more complicated than in my example)

Is there a hack to the experimental :has pseudo-class?