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>

原文由 DanteVoronoi 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Andy Tschiersch 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

按照 Andy Tschiersch 的回答，我建议使用 tabindex =“0”（这是它的默认值）而不是 tabindex =“1”。

请参阅： https ://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/tabindex

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

原文由 Pol Thomas 发布，翻译遵循 CC BY-SA 4.0 许可协议