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

Posted 2023-03-05

【中文标题】css在点击时改变元素的样式

【英文标题】：css change style of an element on click

【发布时间】：2011-08-31 01:30:42

【问题描述】：

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

我尝试使用 'active' 样式，但没有成功。

我的代码：

#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 伪类适用于表单字段、链接等元素。

【讨论】：

查看我在上面发布的示例链接。另外，你在设计什么样的元素？

@dana：您使用的是 Chrome 或 Safari，不是吗？

它很完美，但在 Chrome 中根本不起作用……知道为什么吗？

可能是因为它只适用于通常可以接收焦点的元素，如 INPUT 或 A。例如，它不适用于典型的 DIV。 （我认为可以通过给它tabindex="-1" 来允许任何html 接收焦点。或者是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 Example