How do I remove hyperlink color on visited if navbar "inverts" on hover?
Question
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.
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:
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...
PS Don't mind the colors, it's for test.
1 answers
solution1
0 ACCPTED 2022-04-04 19:06:20
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 a {
color: blue;
}
.topnav:hover a {
color: red;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.