CSS: Fokus funktioniert nicht

Ich habe versucht mit:focus CSS Pseudo-Klasse in meinem Projekt. Ich möchte die Farbe des Elements ändern, auf das ich klicke. Wenn ich nun auf mein Element klicke, ändere ich die Farbe nur dort, wo es aktiv ist und kehre nach dem Hochfahren mit der Maus zur alten Farbe zurück. Nach dem zweiten Klick möchte ich es wieder in alter Farbe. Ich verwende Chrome.

Dem Hie

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

Antworten auf die Frage(8)

Ihre Antwort auf die Frage