Блог

Главная - Вопросы по программированию - css изменяет стиль элемента при нажатии

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

#css #onclick #href #visited

#css #onclick #href #посещенный

Вопрос:

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

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

Мой код:

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


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

но элемент становится «желтым» всего на миллисекунду, пока я на самом деле нажимаю на него…

Ответ №1:

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

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

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

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

Комментарии:

1. Смотрите ссылку на пример, которую я разместил выше. Кроме того, какой элемент вы стилизуете?

2. @dana: Вы используете Chrome или Safari, не так ли?

3. это идеально, но совсем не работает в Chrome… есть какие-нибудь подсказки, почему?

4. Вероятно, потому, что это работает только с элементами, которые обычно могут получать фокус, такими как INPUT или A. Это не будет работать, например, с обычным DIV. (Я думаю, что можно разрешить любому HTML получать фокус, однако, предоставив его tabindex="-1" . Или это было tabindex="0" ?)

Ответ №2:

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

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

Похоже, это отлично работает с полями ввода текста или при фокусировке с помощью клавиши tab. Чтобы сделать вышеуказанное совместимым с другими браузерами, добавьте атрибут 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