如何使用CSS焦點？

Question

我熟悉使用CSS和'懸停'功能，但我很想知道如何使用點擊功能。

所以要開始使用懸停功能，您可以：

#test { 
background: black; 
height: 100px; 
width: 100px; 
} 

，然後當鼠標「懸停」在我希望它變成白色

#test:hover { 
background: white; 
height: 100px; 
width: 100px; 
} 

原來是一個類似的方式改變點擊背景？

謝謝！

詹姆斯

Answer 1

原來是改變上單擊背景的類似的方式？

您可以使用javascript做到這一點。

Simpliest的就是用一些jQuery的

$('#test').click(function(){ 
    css('background','green'); 
}); 

您還可以更改類的項目的一次點擊。這樣你可以將css存儲在你的樣式表中。

$('#test').click(function(){ 
    $(this).addClass('greenBackground'); 
}); 

Answer 2

您的描述略顯含糊，但目前的CSS規範只提供以下相關的僞類：

• :active - 同時被點擊的元素是
• :focus簡單應用 - 而該元件應用是否集中（小鼠與否）

Answer 3

僞選擇器element:focus一般用於當e lement有重點。就像當你在一個textarea或輸入內輸入時一樣。

正如您在this demo,button:focus中所看到的，background-color不會使onClick的任何不同。

要使它改變被點擊時，使用element:active僞選擇：

button:active 
{ 
    background-color: #f00; 
} 

工作演示here。