更改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

回答

相关问题