Как сделать так, чтобы при наведении на один объект, меняется другой, с помощью hover?

Question

[Alice13]

Есть меню. При нахождении на странице "мастера", у ссылки "мастера" bg голубой. При наведении на другую ссылку из меню, они светятся разными цветами (оранжевый, розовый и т.д.). Проблема в том, что если мы наводим на другую ссылку (например, запись), то запись должна светиться розовым на фоне, а голубой bg с ссылки "мастера" должен меняться на черный, т.е. переставать светиться.

Как я уже ни пробовала, и через + и через ~, через пробел. Я не понимаю, в чем ошибка.

<header>
            <h1><img src="лого.png" height="146px">Cute nails</h1>
            <hr style="height: 3px;">
            <hr style="height: 15px">
            <nav>
                <a class="mastera" href="manicure.html">мастера</a>
                <a class="zapis" href="manicure_zap.html">запись</a>
                <a class="rabota" href="manicure_rabota.html">работа у нас</a>
                <a class="tochki" href="manicure_toch.html">наши точки</a>
            </nav>
        </header>

nav {
    display: flex;
    justify-content: space-around;
}
a {
    font-size: 70px;
    color: #FFFF;
    text-decoration: none;
    margin-right: 15px;
    margin-left: 15px;
}
.mastera {
    margin: 60px;
    background-color: aqua;
    padding: 20px;
}
.zapis:hover .mastera{
    color: black;
}
.zapis {
    margin: 60px;
    padding: 20px;
}
.zapis:hover {
    background-color: #E7B8E8;
}

.rabota {
    margin: 60px;
    padding: 20px;
}
.rabota:hover {
    background-color: aquamarine;
}
.tochki {
    margin: 60px;
    padding: 20px;
}
.tochki:hover {
    background-color: orange;
}

Answer 1

[Сергей delphinpro]

nav:hover .master { bg: black; }
nav:hover .master:hover { bg: blue; }

Можно через has

nav:has(.rabota:hover) .master {  bg: black; }
// Если внутри nav навели на ссылку работа, то у мастера выключить подсветку