css改变点击元素的样式

问题描述：

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

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

我的代码：

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


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

，但该元素是 '黄色' 只有一毫秒，而我居然一下就可以了...

答

使用：focus伪类

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

看到这个例子 - >http://jsfiddle.net/7RASJ/

焦点伪类对表单域，链接等元素起作用

仍无法正常工作 – dana 2011-05-23 10:41:49

见的例子链接我张贴以上。此外，你是什么样的元素造型？ – Sparky 2011-05-23 10:48:00

@dana：您使用的是Chrome或Safari，是不是？ – thirtydot 2011-05-23 11:02:08

答

它在其他浏览器中无效的原因与css焦点规范有关。它指出：

的：焦点伪类适用而一个元件具有焦点（接受键盘事件或其它形式的文本输入的）。

所以它似乎工作完美罚款与文本输入字段或当您使用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改变点击元素的样式

相关推荐