[英]How do I remove hyperlink color on visited if navbar "inverts" on hover?
I am creating navbar.我正在创建导航栏。 Transparent by default, but a certain color(including text/hyperlinks) once hovered over it.
默认情况下是透明的,但是一旦悬停在它上面就会有某种颜色(包括文本/超链接)。 I can't seem to find a way to remove purple color from visited hyperlinks.
我似乎找不到从访问过的超链接中删除紫色的方法。 Tried
:visited
and reformatting to make sure everything is as DRY as a beginner can make it be.尝试过
:visited
并重新格式化以确保一切都像初学者一样干燥。
HTML: HTML:
<body>
<div class="topnav" id="Topnav">
<a href="#Shop" class="active">Shop</a>
<a href="#ourstory">Our Story</a>
<a href="#contact">Contact</a>
</a>
</div>
</body>
CSS: CSS:
body {
margin: 0;
}
.topnav {
background-color: transparent;
overflow: hidden;
height: 6rem;
display: flex;
align-items: center;
color: black;
}
.topnav:hover {
background-color: black;
color: red; /* Hyperlinks supposed to inherit this color when hovering navbar*/
}
.topnav a {
margin-left: 2rem;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 14px;
font-family:Poppins,Arial, sans-serif;
font-weight: 700;
text-transform: uppercase;
}
I was thinking of using &&
and "IF" statement to check hover state in JS to hook it up, but there must be a css-pure solution...我正在考虑使用
&&
和“IF”语句来检查 hover state 在 JS 中将其连接起来,但必须有一个 css-pure 解决方案......
PS Don't mind the colors, it's for test. PS不要介意colors,它是为了测试。
This sets the links blue whether visited or not - and sets the links red on .topnav
hover whether the links are visited or not.这会将链接设置为蓝色,无论是否访问过 - 并在
.topnav
hover 上将链接设置为红色,无论链接是否被访问过。
.topnav a {
color: blue;
}
.topnav:hover a {
color: red;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.