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我有两个类，因为我正在使用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;
}

为css sprite（图像）菜单设置活动类

1 个答案: