css改變點擊元素的樣式

我有一個元素列表，我想在單擊列表元素時改變元素的樣式（並且該特定樣式保持不變，直到用戶按下另一個列表項目）。css改變點擊元素的樣式

我嘗試使用「主動」風格，但沒有成功。

我的代碼：

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


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

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

來源

2011-05-23 dana

使用：focus僞類

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

看到這個例子 - >http://jsfiddle.net/7RASJ/

焦點僞類對錶單域，鏈接等元素起作用

來源

2011-05-23 10:39:58 Sparky

仍無法正常工作 – 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

來源

2013-03-06 19:20:07 Biped

css改變點擊元素的樣式

回答

相關問題