How do I remove hyperlink color on visited if navbar "inverts" on hover?-CodePudding

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  id="Topnav">
        <a href="#Shop" >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...

P.S. Don't mind the colors, it's for test.

CodePudding user response：

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

CodePudding user response：

You have an unneeded </a> tag at the end of your topnav div so you can take that out.

The color of the hyperlinks is changing because you haven't explicitly defined a text color for those links so it's using the defaults which are blue for unvisited and purple for visited. If you define a color for your nav links it will solve that issue for you.

If you want the text to be highlighted on :hover and still have the background of the nav bar be black, you'll need to define the hover color on the buttons class .topnav a:hover, not the topnav:hover as you have no text in there so the color attribute isn't doing anything.

<body>
    <div  id="Topnav">
        <a href="#Shop" >Shop</a>
        <a href="#ourstory">Our Story</a>
        <a href="#contact">Contact</a>
      </div>
</body>

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:hover {
  color: red;
}

.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;
  color: blue;
}

https://jsfiddle.net/astombaugh/6gx2pyh5/14/