点击或悬停后，如何更改图标和文本的颜色？
点击或悬停后，如何更改图标和文本的颜色？
提问于 2022-03-18 06:11:41
我现在对编码和项目工作还不熟悉。我现在有一个侧Navbar，我试图让图标和文本改变颜色，当我要么悬停在它上面，要么我点击那个路线(例如，如果我点击主页)它将保持蓝色，直到我点击另一个链接，并保持蓝色，而我在其他链接上徘徊。
这是我的侧navBar的代码：
const Navbar = ({ handleClick, isLoggedIn, email }) => (
<div className="wrapper">
<nav
className="navbar navbar-expand d-flex flex-column align-item-center-start"
id="sidebar"
>
<a href="/" className="navbar-brand text-light mt-2">
<div className="display-6 font-weight-bold">
<span>SPODify +</span>
</div>
</a>
<ul className="navbar-nav d-flex flex-column w-100 mt-4">
<li className=" h-25 nav-item border-bottom">
<a href="/" className="nav-link text-light pl-4">
<i className="bi bi-house-door "></i>
HOME
</a>
</li>
<li className="h-25 nav-item border-bottom">
<a href="#" className="nav-link text-light ">
<i className="bi bi-search"></i>
SEARCH
</a>
</li>
<li className="nav-item h-10 border-bottom">
<a href="/show" className="nav-link text-light ">
<i className="bi bi-rainbow"></i>
PODCASTS
</a>
</li>
<li className="nav-item h-25 border-bottom">
<a href="#" className="nav-link text-light pl-4">
<i className="bi bi-collection"></i>
YOUR LIBRARY
</a>
</li>
{isLoggedIn ? (
<>
<li className="nav-item h-25 border-bottom">
<a href="/login" className="nav-link text-light pl-4">
<i className="bi bi-person-circle"></i>
{email}
</a>
</li>
<li className="nav-item h-25 border-bottom">
<a
href="#"
onClick={handleClick}
className="nav-link text-light pl-4"
>
LOGOUT
</a>
</li>
</>
) : (
<li className="nav-item h-25 border-bottom">
<a href="/login" className="nav-link text-light pl-4">
LOGIN
</a>
</li>
)}
</ul>
</nav>
<div>
{isLoggedIn ? (
<div>
<Home email={email} />{" "}
</div>
) : (
<div>
<h1>WELCOME, SIGN UP</h1>
<Signup />
</div>
)}
</div>
</div>
);我试图通过将它添加到我的CSS文件中来实现这一点：
nav a.nav-link:hover {
background-color: blue;
}但这只会让整个部分变成蓝色：
关于如何更改的提示，当我悬停在图标和文本上并单击链接时，它只能是图标和文本吗？提前感谢！
作为参考，这就是我想要达到的目标：
当前在主链接上单击并悬停在来宾上，这就是为什么两者都是不同颜色的的原因
回答 1
Stack Overflow用户
发布于 2022-03-18 06:44:02
你在正确的道路上。要更改文本和图标的颜色，需要将background-color更改为color这个css：
nav a.nav-link:hover {
color: blue;
}示例：
a:hover{
color: blue;
}<ul>
<li>
<a>My Test</a>
</li>
</ul>
对于活动部分(一旦单击)，需要为此添加一个额外的类。(例如：.active)。然后，您可以将其样式设置为与悬停时相同的方式：
a:hover,
a.active{
color: blue;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71523084
复制相关文章
相似问题
腾讯云开发者
