当我将鼠标悬停在导航栏区域上时，我希望我的导航栏背景为白色，而导航栏中其他元素的颜色为黑色.我该怎么做?

Question

我的导航栏代码是这样的:

<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;
}

我想把整个导航栏的背景色从透明改为白色，我已经这么做了。但是，当鼠标悬停到导航栏部分时，我希望导航栏中的其他元素，如导航栏链接和图标，从白色变为黑色。

我该怎么做?由于

Answer 1

可以将color加入.navbar:hover规则

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

如果继承不能正常工作，您可以显式地:

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

有一些方法可以更显式，但如果上面的代码不起作用，那么我认为存在特定冲突。检查navbar内部元素的样式规则，以确保您没有覆盖hover规则的样式更改。

你可以通过在浏览器开发工具中检查元素来实现这一点，你会看到所有影响该元素的规则以特定的顺序排列，这将帮助你跟踪你的样式被覆盖的位置。