Question

我尝试在我的项目中使用:focus CSS伪类。我想改变单击它的元素的颜色。现在，当我单击我的元素更改颜色时，仅在它处于活动状态时，鼠标向上后它将返回旧颜色。第二次点击后，我希望它恢复旧颜色。我使用的是Chrome。

演示 here

＆＃13;

.row {
  display: inline-block;
  border: 1px solid grey;
  height: 200px;
  width: 200px;
  line-height: 1em;
  background: grey;
  margin: 5px;
  opacity: 0.1;
}
.row:active,
.row:focus {
  background: orange;
}

＆＃13;

<div id="main" class="container">
  <div class="row" id="row0">
  </div>
</div>

＆＃13;

Answer 1

如果你想要一个真正的焦点状态到div元素，你可以为它添加一个tabindex属性。

＆＃13;

.row {
	display:inline-block;
  border:1px solid grey;  
  height:200px;
  width: 200px;
  line-height:1em;
  background: grey;
  margin: 5px;
   opacity: 0.1;
}

.row:active, .row:focus { background: orange; }

＆＃13;

<div id="main" class="container">
<div class="row" tabindex="1" id="row0">
</div>
</div>

＆＃13;

如果要通过单击相同的div元素来切换颜色，则必须使用javascript（jQuery）：

＆＃13;

jQuery('#row0').click(function() {
  $(this).toggleClass('orange');
});

＆＃13;

.row {
	display:inline-block;
  border:1px solid grey;  
  height:200px;
  width: 200px;
  line-height:1em;
  background: grey;
  margin: 5px;
   opacity: 0.1;
}

.row.orange { background: orange; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="main" class="container">
<div class="row" id="row0">
</div>
</div>

＆＃13;

Answer 2

您可以通过添加隐藏的复选框输入来模拟使用CSS技巧的切换效果。

See it here

HTML：

<div id="main" class="container">
  <input type="checkbox" />
  <div class="row" id="row0">
  </div>
</div>

CSS：

.container { position: relative; }
input { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 200px; height: 200px; z-index: 1; opacity: 0; display: block; }
input:checked + .row { background: orange; }

Answer 3

您要找的是:visited，但这不适用于div。您应该使用a - 标记（包括href="#"）。

.row:active, .row:visited { background: orange; }

检查下面的小提琴：

http://jsfiddle.net/uuyNH/32/

编辑：文森特G的回答似乎做了你想要的更多，因为你可以通过点击去掉背景颜色。

Answer 4

.row {
  display:inline-block;
  border:1px solid grey;  
  height:200px;
  width: 200px;
  line-height:1em;
  background: grey;
  margin: 5px;
  opacity: 0.1;
}

.row:active, .row:focus { background: orange; opacity:1 }

<div id="main" class="container">
<div class="row" tabindex="1" id="row0">
</div>
</div>

请试试这个......

CSS：重点不起作用

4 个答案: