Установка активного класса для меню css sprites (изображение) - PullRequest
Новая
       3

Установка активного класса для меню css sprites (изображение)

1 голос
/ 23 января 2012

Я хочу установить активный класс для меню изображений 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) класс, но несмог заставить активный класс работать таким же образом.)

1 Ответ

2 голосов
/ 23 января 2012

псевдо-селектор :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;
}
...