html - 保留链接 a :active the same way after link press

Question

我今天在玩 css 和 html，我试图让图像/链接在鼠标悬停并单击时更改其形式。但我没能做到的是，当我点击图片时，我选择的图片会保持“点击”状态。

这是 CSS:

#header {
    background-image: url(bg.jpg);
    height: 32px;
    width: 100%;
    border-bottom-style: solid;
    border-bottom-color: #000;
    border-bottom-width: 1px;
}
#logo a {
    background-image:url(logo.png);
    display:block;
    width:128px;
    height:32px;
}
#logo a:hover {
    background-image:url(logohover.png);
    display:block;
    width:128px;
    height:32px;
}
#logo a:focus {
    background-image:url(logoonclick.png);
    display:block;
    width:128px;
    height:32px;
}

这是 HTML:

<div id="header">
    <div id="logo">
        <a href="#"></a>
    </div>
</div>

所以基本上我希望链接或图像在被点击后保持“点击”的形式，如果再次点击我希望它变回标准。

Answer 1

最简单的方法是使用 Javascript 在链接上切换类，然后将类添加到 a:hover 的 CSS。

在 jQuery 中，这看起来像:

$('#logo a').click(function() {
    $(this).toggleClass('clicked');
});

然后更改 CSS 以添加新类:

#logo a:hover, .clicked {
    /* ... */
}

如果您不想使用 Javascript，您还可以将 a:visited 的样式设置为看起来像悬停状态 - 单击时，链接看起来仍处于单击状态。但是，您无法仅使用 CSS 将其更改回点击前的状态。