保持链接a：在链接按下后以相同的方式激活

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 将其更改回点击前的状态。

Answer 2

如果您将 a 元素替换为 input[type=checkbox] 和标签，您可以使用 :checked-pseudeselector 获得所需的内容：

http://jsfiddle.net/CWv6D/

#foo {
    display: none;
}
#logo label {
    background-image:url(http://placehold.it/128x32);
    display:block;
    width:128px;
    height:32px;
}
#logo label:hover {
    background-image:url(http://placesheen.com/128/32);
}
#logo input:checked + label {
    background-image:url(http://placekitten.com/128/32);
}

HTML：

<div id="header">
    <div id="logo">
      <input id="foo" type="checkbox"/>
      <label for="foo"></label>
    </div>
</div>