CSS：焦点不工作

Question

我尝试在我的项目中使用:focuscss伪类。我想改变我点击它的元素的颜色。现在，当我点击我的元素时，只在它处于活动状态的地方改变颜色，鼠标上移后，它就会返回到原来的颜色。第二次点击后，我想让它回到原来的颜色。我用的是铬。

此处演示

null

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

html prettyprint-override"><div id="main" class="container">
  <div class="row" id="row0">
  </div>
</div>

null

Answer 1

null

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

Answer 2

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

在这里看到

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

如果您希望div元素具有真正的焦点状态，可以向其添加tabindex属性。

null

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