我們應該包括一個小JS嗎?因爲CSS基本上不是爲這個工作創建的。 CSS只是一種樣式表,可以將樣式添加到HTML中,但其僞類可以完成基本CSS無法完成的操作。例如button:active
active是僞的。
參考:
http://css-tricks.com/pseudo-class-selectors/您可以瞭解更多關於假這裏!
您的代碼:
,你遇到的基本的,但樂於助人的代碼。只有觸發點擊事件後纔會發生:active
。
button {
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
}
button:active {
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}
這是CSS會做什麼rlemon建議是好的,但是這將是他建議將需要a
標籤。
如何使用CSS:
可以使用:focus
了。 :focus
會在點擊完成後繼續工作,直到您點擊其他地方,這是CSS,您正在嘗試使用CSS,因此請使用:focus
來更改按鈕。
JS會怎麼做:
的JavaScript的jQuery庫將幫助我們爲這個代碼。這裏是例子:
$('button').click(function() {
$(this).css('border', '1px solid red');
}
這將確保按鈕保持紅色,即使點擊跳出。要改變聚焦型(改變紅等顏色),您可以使用此:
$('button').click(function() {
$(this).css('border', '1px solid red');
// find any other button with a specific id, and change it back to white like
$('button#red').css('border', '1px solid white');
}
這種方式,您將創建一個導航菜單。當你點擊它們時,它會自動改變標籤的顏色。 :)
希望你得到答案。祝你好運!乾杯。
你要添加一些JavaScript。 – MattDiamant 2013-03-17 17:32:19
雖然這很可能使用CSS,但這不是CSS設計的目的。考慮JavaScript – 2013-03-17 17:32:23
可能的重複http://stackoverflow.com/questions/8830048/how-to-get-css-button-to-stay-active-after-it-has-been-clicked – 2013-03-17 17:33:15