html - 仅使用 css 更改 div 元素的颜色

Question

我有以下按钮。 buttons .

这post帮助我。但是，每次我点击其他任何东西时，按钮的颜色变化都会消失。我怎样才能让按钮保持橙色，直到我点击另一个按钮？

这是我的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);

这是我的 html:

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

Answer 1

因为你使用的是 angular，所以对事件的 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>