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

您可以使用checkbox hack

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

按下鼠标按钮，您需要：http://api.jquery.com/mousedown/
与一些http://api.jquery.com/css/一起，您可以实现您的需求。

如果你把你的代码放在一个jsfiddle我可以帮助你。

Answer 3

试试这个

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

Answer 4

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

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

CSS

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

htnl

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

Answer 5

如果你没有被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;
}

CSS - 像“已经点击”属性的东西？

5 个答案: