如果悬停导航栏 "inverts"，如何删除已访问的超链接颜色？

Question

我正在创建导航栏。默认情况下是透明的，但是一旦悬停在它上面就会有某种颜色（包括text/hyperlinks）。我似乎找不到从访问过的超链接中删除紫色的方法。尝试 :visited 并重新格式化以确保一切都像初学者一样干。

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

我正在考虑使用&&和“IF”语句来检查JS中的悬停状态以将其连接起来，但必须有一个css-pure解决方案...

P.S。颜色别介意，测试用

Answer 1

这会将链接设置为蓝色（无论是否已访问）- 并在 .topnav 悬停时将链接设置为红色（无论链接是否已访问）。

.topnav a {
 color: blue;
}

.topnav:hover a {
  color: red;
}

Answer 2

您的 topnav div 末尾有一个不需要的 </a> 标签，因此您可以将其删除。

超链接的颜色正在改变，因为您没有为这些链接明确定义文本颜色，所以它使用默认值，即未访问的蓝色和已访问的紫色。如果您为导航链接定义颜色，它将为您解决该问题。

如果您希望文本在 :hover 上突出显示并且导航栏的背景仍为黑色，则需要定义按钮上的悬停颜色 class .topnav a:hover，而不是 topnav:hover，因为那里没有文本，所以 color 属性没有任何作用。

<body>
    <div class="topnav" id="Topnav">
        <a href="#Shop" class="active">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;
  /* 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/

如果悬停导航栏 "inverts"，如何删除已访问的超链接颜色？

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

html

css

colors