html - CSS - 类似“已经点击”的属性？

Question

所以我希望当用户点击一个 div 时，另一个 div 会改变颜色。为此，我有：

CSS

 .div1, .div2{ background: blue; }
    .div1:active + .div2 { background: red; }

HTML

<div class="div1">Some text</div>
<div class="div2">Other text</div>

这样，当用户单击 div1 时，div2 会更改背景，但仅当用户仍在按下鼠标时才会更改背景。

我想制作类似:visited属性的东西，用户在 div1 中单击一次，并且 div1 保持颜色更改。

Answer 1

您可以使用复选框黑客

html:

<input type="checkbox" id="toggle">
<label for="toggle"><div class="div1">Some text</div></label>
<div class="div2">Other text</div>

CSS：

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
.div1, .div2{
  background: blue;
  }
#toggle:checked ~ .div2{
  background: red;
 }

jsfiddle

Answer 2

如果您不被 IE 所困扰，那么您可以执行以下操作：

http://jsfiddle.net/seemly/8NgpS/

HTML：

<div class="div1">Some text</div>
<div class="div2">Other text</div>

CSS：

div {
    width:200px;
    height:200px;
}
.div1 {
    background:#c00;
}
.div2 {
    background:#0c0;
}
.div1:active + div {
    background:#00c;
}

Answer 3

您可以为此目的使用js函数..

function change_color()
{
document.getElementById('change').className  = 'active';
}

css

.div{ background: blue; }
.active{ background: red; }

html

<div class="div" id="click" onclick="change_color()">Some text</div>
 <div class="div" id="change">Other text</div> 

Answer 4

1. 对于按下鼠标按钮，你需要这个：http ://api.jquery.com/mousedown/

2. 连同一些http://api.jquery.com/css/你可以实现你所需要的。

如果您将代码放在 jsfiddle 中，我可以为您提供帮助。

Answer 5

尝试这个

<div class="div1"  onclick="style.backgroundColor = '#ff0000';" >some text</div>
<div class="div2">Other text</div>