When i hover over the navbar area I want my navbar background to go white while the color of other e-CodePudding

My Navbar code is like this:

<navbar>
      <div className='carousel-container'>
        <Slider />
      </div>
      <div className='navbar'>
        <div className='nav-brand'>
          <h4>e-LECTR0</h4>
          <span style={{ fontSize: '1.5rem' }}>.</span>
        </div>
        <div className='nav-links'>
          <a href='#'>Home</a>
          <a href='#'>Products</a>
          <a href='#'>Contact</a>
          <a href='#'>About Us</a>
        </div>
        <div className='nav-icons'>
          <a href='#'>
            <i class='fi fi-rr-search'></i>
          </a>
          <a href='#'>
            <i class='fi fi-rr-user'></i>
          </a>
          <a href='#'>
            <i class='fi fi-rr-shopping-cart'></i>
          </a>
        </div>
      </div>
    </navbar>

Where as my CSS code:
.navbar {
  display: flex;
  justify-content: space-between;
  padding: 0 2rem;
  padding-top: 1rem !important;
  align-items: center;
  position: relative;
  transition: 0.3s ease-in-out;
}

.navbar:hover {
  background-color: #fff;
}

So I want to change the background color of my whole navbar section into white from transparent, which i did. But while hovering into the navbar section I want the other elements in the navbar, such as navbar links and icons, to go black from white color.

How do I do it? Thanks

CodePudding user response：

You can add color to the .navbar:hover rule.

.navbar:hover {
  background-color: #fff;
  color: black;
}

If the inheritance isn't working correctly, you can be explicit:

.navbar:hover {
  background-color: #fff;
}

.navbar:hover > * {
  color: black;
}

There are ways you can be more explicit, but if the code above isn't working, then I expect there is a specificity conflict. Check the style rules for the elements inside the navbar to make sure that you aren't overwriting the style change from the hover rule.

You can do this by inspecting the element in the browser developer tools, and you will see all rules affecting that element in specificity order, and that will help you track down where your style is being overwritten.