8

要素のリストがあり、リスト要素をクリックしたときに要素のスタイルを変更したい（そして、ユーザーが別のリスト項目を押すまでその特定のスタイルを変更したい）。

「アクティブ」スタイルを使用してみましたが、成功しませんでした。

私のコード：

#product_types
{       
    background-color: #B0B0B0;
position: relative; /*overflow: hidden;*/
}


#product_types a:active
{
    background-color:yellow;
}

しかし、要素は1ミリ秒だけ「黄色」ですが、実際にクリックすると...

4

2 に答える 2

15

:focus 疑似クラスを使用する

#product_types a:focus
{
 background-color:yellow;
}

この例を参照してください-> http://jsfiddle.net/7RASJ/

focus 疑似クラスは、フォーム フィールド、リンクなどの要素で機能します。

于 2011-05-23T10:39:58.407 に答える
5

他のブラウザで動作しない理由は、cssフォーカスの仕様に関連しています。それは述べています：

：focus疑似クラスは、要素にフォーカスがあるときに適用されます（キーボードイベントまたは他の形式のテキスト入力を受け入れます）。

したがって、テキスト入力フィールドで、またはタブキーを使用してフォーカスする場合は、完全に正常に機能するようです。上記を他のブラウザと互換性を持たせるには、各要素にtabindex属性を追加すると、問題が解決するように見えます。

HTML：

<ul>
    <li id = 'product_types'><a href='#' tabindex="1">First</a></li>
    <li id = 'product_types'><a href='#' tabindex="2">Second</a></li>
</ul>

CSS：

#product_types  {
    background-color: #B0B0B0;
    position: relative;
}

#product_types a:focus {     
    background-color:yellow;   
}

JSFiddleの例

于 2013-03-06T19:20:07.693 に答える