CSSスプライト（画像）メニューのアクティブクラスを設定する

Question

CSS画像メニューにアクティブなクラスを設定したいと思います。アクティブなセレクタをホバーセレクタと同じに設定しようとしましたが、動作しませんでした。

CSS

#menu li a.fooa { 
    background-image: url(/images/foo_a.png); 
    height: 20px; 
    width: 20px; 
} 

#menu li a.foob { 
    background-image: url(/images/foo_b.png); 
    height: 20px; 
    width: 20px; 
    margin-left:-8px; 
} 

#topmenu li a:hover, #topmenu li a:active { 
    background-position: left bottom; 
    height: 20px; 
    width: 20px; 
} 

HTML

<ul id="foo_menu"> 
<li><a href="/fooA" class="fooa qtipmenu" id="foo_A"></a></li> 
<li><a href="/fooB" class="foob qtipmenu" id="foo_B"></a></li> 
</ul> 

（私はqtip2のポップアップを使用していますので、私は、私はアクティブなクラスを設定しようとしました。それぞれのhrefのための2つのクラスを持っています第2（qtip2）クラスは含まずに、アクティブクラスをそのように動作させることができませんでした。）

Answer 1

疑似セレクタ:activeは、要素をアクティブに設定しません。アクティブなリンクを選択します。アクティブなリンクは、エレメントがリリースされるまでマウスがクリックされた時間だけを意味します。あなたの要素にclass="active"を適用するIST必要なもの ：

リンク＃1がアクティブである：

<ul id="foo_menu"> 
    <li><a href="/fooA" class="fooa qtipmenu active" id="foo_A"></a></li> 
    <li><a href="/fooB" class="foob qtipmenu" id="foo_B"></a></li> 
</ul> 

とCSSの変更へ：

#topmenu li a:focus, 
#topmenu li a:hover, 
#topmenu li a.active { 
    background-position: left bottom; 
    height: 20px; 
    width: 20px; 
}