0

今日は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>

したがって、基本的には、リンクまたは画像をクリックした後も「クリックした」形式のままにしておき、もう一度クリックした場合は、元の標準に戻す必要があります。

4

2 に答える 2

2

これを行う最も簡単な方法は、Javascript を使用してリンク上のクラスを切り替え、そのクラスを a:hover の CSS に追加することです。

jQuery では、これは次のようになります。

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

次に、CSS を変更して新しいクラスを追加します。

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

Javascript を使用したくない場合はa:visited、ホバー状態のようにスタイルを設定することもできます。クリックすると、リンクがまだクリックされているように見えます。ただし、CSS だけを使用してクリック前の状態に戻すことはできません。

于 2013-01-14T15:57:32.257 に答える
1

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>
于 2013-01-14T16:03:37.803 に答える