Ändern Sie die Farbe eines div-Elements mit nur CSS

Question

Ich habe die folgenden Tasten. buttons. Diese post hat mir geholfen Jedes Mal, wenn ich auf etwas anderes klicke, verschwindet die Farbänderung meiner Schaltfläche. Wie kann ich den Knopf orange halten, bis ich auf einen anderen klicke?

Hier ist meine CSS:

.circle-button{ 
    border-radius: 50%; 
    width: 20px; 
    height: 20px; 
    display: inline-block; 
    background: var(--button-background, rgb(110, 109, 105)); 
    margin-left: 2px; 
    margin-right: 2px; 
    margin-top: 5px; 
    margin-bottom: 5px 
} 

.circle-button:focus{ 
    outline: none; 
    --button-background: rgb(231, 153, 8); 
} 
.circle-button:visited{ 
    --button-background: rgb(153, 13, 130); 

}

hier mein html ist:

<div class="circle-button" *ngFor="let record of imageRecords; let i = index" tabindex="{{i}}" ></div> 

Answer 1

Da Sie mit eckiger, Gebrauchsklasse für aktive div:

CSS:

.circle-button{ 
    border-radius: 50%; 
    width: 20px; 
    height: 20px; 
    display: inline-block; 
    background: var(--button-background, rgb(110, 109, 105)); 
    margin-left: 2px; 
    margin-right: 2px; 
    margin-top: 5px; 
    margin-bottom: 5px 
} 

.circle-button.active { 
    outline: none; 
    --button-background: rgb(231, 153, 8); 
} 

HTML:

<div class="circle-button" *ngFor="let record of imageRecords; let i = index" tabindex="{{i}}" [class.active]="currentTab == i" (click)="currentTab = i"></div>