html - 保持链接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

如果你用 input[type=checkbox] 和标签替换你的 a 元素，你可以使用 :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>