如果導航欄在 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