CSS изменить стиль элемента при нажатии

Question

У меня есть список элементов, и я хочу изменить стиль элемента, когда один нажимает на элемент списка (и этот конкретный стиль, чтобы остаться прежним, пока пользователь не нажмет другой элемент списка).

Я пытался использовать стиль «активный», но безуспешно.

Мой код:

#product_types
{       
    background-color: #B0B0B0;
position: relative; /*overflow: hidden;*/
}


#product_types a:active
{
    background-color:yellow;
}

но элемент «жёлтый» только миллисекунда, в то время как я на самом деле нажимаю на него ...

Answer 1

Используйте псевдокласс: focus

#product_types a:focus
{
 background-color:yellow;
}

См. Этот пример -> http://jsfiddle.net/7RASJ/

Псевдокласс focus работает с такими элементами, как поля формы, ссылки и т. Д.

Answer 2

Причина, по которой он не работает в других браузерах, связана со спецификацией фокуса css. В нем говорится:

Псевдокласс: focus применяется, когда элемент имеет фокус. (принимает события клавиатуры или другие формы ввода текста).

Так что кажется, что он отлично работает с полями ввода текста или когда вы фокусируете, используя клавишу табуляции. Чтобы сделать это совместимым с другими браузерами, добавьте атрибут tabindex к каждому элементу, и это, похоже, решит проблему.

HTML:

<ul>
    <li id = 'product_types'><a href='#' tabindex="1">First</a></li>
    <li id = 'product_types'><a href='#' tabindex="2">Second</a></li>
</ul>

CSS:

#product_types  {
    background-color: #B0B0B0;
    position: relative;
}

#product_types a:focus {     
    background-color:yellow;   
}

Пример JSFiddle