如何在悬停后使 CSS :hover 持久化？ [复制]

Question

我创建了一个带有:hover 效果的导航栏，我想知道如何使该效果持续存在，即使在光标从该区域移除后也是如此。效果是给定单词下的背景颜色。 For example, when Home is selected I'd like for that effect to stay on the element until another element (for example, Register) is clicked.

.navbar {
    list-style-type: none;
    background-color: black;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    height: 50px;
    padding: 0;
}

.navbar a {
    text-decoration: none;
    color: gray;
    padding: 17px;
    transition: background-color 0.5s linear;
}

.navbar a:hover {
    background-color: green;
    color: honeydew;
}

body {
    margin: 0;
}

<header>
    <nav>
        <ul class='navbar'>
            <li><a href='#home'>Home</a></li>
            <li><a href='#download'>Download</a></li>
            <li><a href='#register'>Register</a></li>
            <li><a href='#contact'>Contact</a></li>
            <li><a href='#FAQ'>FAQ</a></li>
        </ul>
    </nav>
</header>

Answer 1

只用 CSS 就可以达到预期的效果，但这很棘手，而且我所知道的唯一方法会导致您的链接失效（因为它需要用 <input type="radio"> 替换您的链接）。所以总的来说，我建议使用 JavaScript。

JavaScript 方法是，使用 jQuery，在触发 mouseover 事件时添加一个类，并在触发另一个所需事件时将其从所有其他元素中删除。

示例：（我已将 :hover 伪选择器替换为 .hover 类选择器，并添加了 jQuery 库和所需代码。）

这个效果不需要jQuery，你可以用vanilla JavaScript做到这一点。

$(".navbar a").on("mouseover", function () {
    $(".navbar a").removeClass("hover");
    $(this).addClass("hover");
});

.navbar {
    list-style-type: none;
    background-color: black;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    height: 50px;
    padding: 0;
}

.navbar a {
    text-decoration: none;
    color: gray;
    padding: 17px;
    transition: background-color 0.5s linear;
}

.navbar a.hover {
    background-color: green;
    color: honeydew;
}

body {
    margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
    <nav>
        <ul class='navbar'>
            <li><a href='#home'>Home</a></li>
            <li><a href='#download'>Download</a></li>
            <li><a href='#register'>Register</a></li>
            <li><a href='#contact'>Contact</a></li>
            <li><a href='#FAQ'>FAQ</a></li>
        </ul>
    </nav>
</header>