如果导航栏在 hover 上“反转”，如何删除已访问的超链接颜色？

Question

我正在创建导航栏。 默认情况下是透明的，但是一旦悬停在它上面就会有某种颜色（包括文本/超链接）。 我似乎找不到从访问过的超链接中删除紫色的方法。 尝试过: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”语句来检查 hover state 在 JS 中将其连接起来，但必须有一个 css-pure 解决方案......

PS不要介意colors，它是为了测试。

Answer 1

这会将链接设置为蓝色，无论是否访问过 - 并在.topnav hover 上将链接设置为红色，无论链接是否被访问过。

.topnav a {
 color: blue;
}

.topnav:hover a {
  color: red;
}

如果导航栏在 hover 上“反转”，如何删除已访问的超链接颜色？

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-04-04 19:06:20

如果导航栏在 hover 上“反转”，如何删除已访问的超链接颜色？

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-04-04 19:06:20

解决方案1
0 已采纳 2022-04-04 19:06:20