Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
28 replies
Satya

Styling sibling elements on hover

Hey all!
I've a navbar where I want the sibling nav-items to have a particular css when I hover over a nav-item. For example, if I've 5 nav-items and I hover on the 1st one, the next 4 nav-items should have another css. I'm not able to figure out how to do that. Please help!
Here's the code:
<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;
        }
    }
}
Was this page helpful?