Question

我有一个元素列表，我想在单击list元素时更改元素的样式（并且该特定样式保持不变直到用户按下另一个列表项）。

我尝试使用'主动'风格，但没有成功。

我的代码：

#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;
}

参见此示例 - ＆gt; http://jsfiddle.net/7RASJ/

焦点伪类适用于表单字段，链接等元素。

Answer 2

它在其他浏览器中不起作用的原因与css焦点规范有关。它声明：

：当一个元素具有焦点时，应用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 Example

css在点击时更改元素的样式

2 个答案: