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，因此请将class用于活动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>

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

1 个答案: