html - 为 css Sprite (图像)菜单设置事件类

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>

(我为每个 href 设置了 2 个类，因为我使用的是 qtip2 弹出窗口。我尝试设置事件类而不包括第二个(qtip2)类，但无法将事件类设置为也可以那样工作。)

Answer 1

伪选择器 :active 不会将元素设置为事件的。它选择事件链接，这意味着只有时间，当鼠标在元素上单击直到它被释放!您需要做的是在您的元素上应用 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;
}