设置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> 

（我有2个班每个HREF因为我使用的是qtip2弹出窗口。我试图设置活动类不包括第二（qtip2）类，但还没有能够让主动类以这种方式工作）

Answer 1

伪选择器:active不会将元素设置为活动状态。它选择活动链接，这意味着只有鼠标在元素上单击直到释放为止的时间！ 你需要IST什么你的元素上应用class="active"：

当链接＃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; 
}