CSS:重点不起作用

Question

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

在这里演示

.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;
}

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

Answer 1

如果要将实际焦点状态设置为div元素,可以向其添加tabindex属性.

.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; }
 

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

如果要通过单击相同的div元素来切换颜色,则必须使用javascript(jQuery):

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

.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; }

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