只使用css点击更改div背景颜色 [英] Change div background color on click using only css

问题描述

所以我有一个div我想改变点击时的颜色。我有三个div，我想表示哪一个是活动div，点击它时基本上我想使用CSS活动属性但不具有特定的属性当鼠标上移时div变回。有点像焦点。如果有帮助的话，我也使用引导程序。

以下是html的一个例子

 < DIV> 
第1部分
< / div> 
< div> 
第2部分
< / div> 
< div> 
第3部分
< / div> 
  

任何人都可以告诉我如何在不使用javascript的情况下完成此操作？

解决方案

通过添加tabIndex，让您的DIV变得可以集中注意力：

 < div tabindex =1> 
第1部分
< / div> 
 
< div tabindex =2> 
第2部分
< / div> 
 
< div tabindex =3> 
第3部分
< / div> 
  

然后您可以简单地使用：focus 伪-class

  div：focus {
 background-color：red; 
} 
  

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

So I have a div I want to change the color of when clicked. I have three divs over all and I want to denote which one is the active div when clicking on it

Basically I want to use the CSS active property but not have the particular div change back when the mouse up occurs. Sort of like a focus. I am also using bootstrap if that is helpful

Here is a example of the html

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

Could anyone tell me how i could accomplish this without using javascript?

解决方案

Make your DIVs focusable, by adding tabIndex:

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

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

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

Then you can simple use :focus pseudo-class

div:focus {
    background-color:red;
}

Demo: http://jsfiddle.net/mwbbcyja/

这篇关于只使用css点击更改div背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！