更改div背景顏色點擊使用只有css

所以我有一個div我想改變點擊時的顏色。我有三個div，我想指出哪一個是活動div當點擊它更改div背景顏色點擊使用只有css

基本上我想使用CSS活動屬性，但不會有特定的div改回來當鼠標上升發生。有點像焦點。我也使用引導，如果這是有幫助的

下面是HTML的例子

<div> 
    Section 1 
</div> 
<div> 
    Section 2 
</div> 
<div> 
    Section 3 
</div>

誰能告訴我，我怎麼能做到這一點不使用JavaScript？

來源

2014-11-21 Philip Loyer

我不知道是否可以做，但我發現這個：http://tympanus.net/codrops/2012/12/17/css-click-events/ - 試試看吧？ – ochi 2014-11-21 19:50:44

[active（selected），hover and inactive tab/div css logic]可能重複（http://stackoverflow.com/questions/6177636/activeselected-hover-and-inactive-tab-div-css-logic） – 2014-11-21 19:54:01

I認爲你可以找到[這裏]答案[1] [1]：http://stackoverflow.com/questions/19260401/change-background-on-button-click-using-css-only – Ehsan 2014-11-21 19:54:09

讓您的DIV可聚焦，通過添加的tabIndex：

<div tabindex="1"> 
Section 1 
</div> 

<div tabindex="2"> 
Section 2 
</div> 

<div tabindex="3"> 
Section 3 
</div>

然後你可以簡單的用:focus僞類

div:focus { 
    background-color:red; 
}

演示：http://jsfiddle.net/mwbbcyja/

來源

2014-11-21 19:53:44

This只要你在頁面上沒有其他可能需要關注的項目。 – dave 2014-11-21 20:00:00

那麼如果你點擊其他項目 - DIV將失去焦點並恢復原始風格。如果這不是預期的行爲，OP應該詳細說明。 – 2014-11-21 20:05:13

我試過這個，就像dave說的那樣，只要網頁上還有其他東西，它似乎不起作用。謝謝 – 2014-11-24 15:35:38

-3

嘗試使用這個

div .active { 
    background-color:blue; 
    }

來源

2014-11-22 10:58:28 Jon

這不會做什麼問：「*點擊*」。「主動」是*不是同一件事。 – 2014-11-22 21:46:31

div:focus { 
    background-color:'color'; 
}

來源

2018-03-08 14:11:40 mark

歡迎來到StackOverflow。你的回答可能會降低選票。閱讀[**如何編寫一個好的答案？**]（https://stackoverflow.com/help/how-to-answer）知道原因。 – 2018-03-08 14:18:47

更改div背景顏色點擊使用只有css

回答

相關問題