Styling sibling elements on hover

<nav id="navbar">
            <div className="nav-item">
                <a href="/">// Home</a>
            </div>
            <div className="nav-item">
                <a href="/#expertise">// Expertise</a>
            </div>
            <div className="nav-item">
                <a href="/#work">// Work</a>
            </div>
            <div className="nav-item">
                <a href="/#experience">// Experience</a>
            </div>
            <div className="nav-item">
                <a href="/#contact">// Contact</a>
            </div>
        </nav>

#navbar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.75em;
    height: 50px;
    .nav-item {
        a {
            text-decoration: none;
            color: #fff;
            font-weight: 500;
        }
    }
}