0

みんな私はCSSボタンで現在のビューステートを作ろうとして失敗しています......スプライトにはオフとオーバーの2つの状態があります.オーバーステートもページの現在の状態にしたいです表示中....ボタンのcssとhtmlは次のとおりです。

CSS:

.inbox {
    border: none;
    width: 88px;
    height: 26px;`enter code here`
    background: url(images/v2images/default_inbox_BTN.png) no-repeat top left;
    margin-left: 0px;
    margin-right: 20px;
    vertical-align: middle;
    cursor:pointer;
}

.inbox:hover {
        background-position: -88px 0;
}

html:

<input type="submit" value="" class="inbox" />

現在の状態 (.inbox:current) を作成し、オーバー状態の位置に合わせて位置を調整するだけで、ホバーとは異なり、負の値がないと仮定しましたが、うまくいきませんでした。

よろしくお願いします

4

3 に答える 3

2

あなたは近くにいます。あなたはクラスを持っているでしょう。 :hover疑似クラスです。ホバリングを実際に「強制」することはできません。ただし、できることは、次のようなクラスを追加することです。

.inbox:hover
, .inbox.current
{
        background-position: -88px 0;
}

と

<input type="submit" value="" class="inbox current">

したがって、CSS は、クラスの受信トレイに対して、ホバーしたときに bg の位置を設定すると述べています。また、クラス current を持つ要素でクラス inbox も見つかった場合は、同じ bg 位置規則を適用します。

単一のクラスを使用したい場合は、次のことができます

<input type="submit" value="" class="inbox inbox-current">

それからあなたのCSS

.inbox:hover
, .inbox-current
{
        background-position: -88px 0;
}

結果は同じですが、古いブラウザのサポートが強化されています

于 2013-02-21T00:05:38.913 に答える
1

CSS には実際の現在の状態はありません。javascript (jquery) を使用して自分で手動で設定するか、ページをロードするときに設定する必要があります。すなわち。クラスの受信ボックスと現在のクラスを 2 つの別個のクラスとして保持し、

.current { background-position: -88px 0 !important; }

受信トレイのクリックを検出し、他のすべてのボタンから現在のボタンを削除して、受信トレイに追加します。

于 2013-02-21T00:06:24.160 に答える
0

何を求めているのかわかりませんが、いつでもルールセットを展開できます。

.inbox:hover, .current {
    background-position: -88px 0;
}

次に、.inboxがホバーされているか、.currentクラスを持っている場合、ホバー状態で表示されます。:focusとを使用することもできます:active

于 2013-02-21T00:05:29.630 に答える