Question

我今天正在玩css和html，我正试图在悬停和点击时获得一个图像/链接来改变它的形式。但我没有做的就是我选择留下的图像＆＃34;点击＆＃34;当我点击图片时。

这是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>

所以基本上我希望链接或图像保持在“＃34;点击”＃34;单击后，如果再次单击，我希望它从...更改回其标准。

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

如果用输入[type =复选框]和标签替换你的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>

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

2 个答案: