html - CSS 帮助 : active button not changing style

Question

我有一组 3 个按钮(尽管其中一个是隐藏的)，但是当按钮处于事件状态时，即已被单击，其背景颜色不会从 #36A9E1 更改为 #F9B233。 :hover 状态表现良好；只有 :active 状态才是有趣的。

奇怪的是，当我在 Chrome 中使用检查打开网页，然后单击其中一个按钮时，它工作正常。一旦我点击开发者工具，它就会恢复为默认背景颜色。

链接:http://whatsondv.co.uk/prbok/clipperdesctabs.html .

可能是什么问题？

.tablinksClipper{   
    background-color:#36A9E1;
    padding:0.5em;
    font-weight:700;
    color:#FFF;
    display:inline-block;
    margin-bottom:0.5em;
    font-family:Sintony, sans-serif;
    font-size:1em;
    line-height:1.25em;
    border:none;
    transition:0.3s;
}

.tablinksClipper:hover{
    background-color:#F9B233;
    cursor:pointer;
}

.tablinksClipper:active{
    background-color:#000000!important;
}

<div class="tab">
  <button class="tablinksClipper" onclick="openSectionClipper(event, 'infoClipper')" id="defaultClipper"><i class="fas fa-info-circle"></i> About</button>
  <button class="tablinksClipper" onclick="openSectionClipper(event, 'photosClipper')"><i class="fas fa-camera"></i> Photos</button>
  <button style="display:none;" class="tablinksClipper" onclick="openSectionClipper(event, 'dogsClipper')" id="dogTabClipper"><i class="fas fa-paw"></i></button>
</div>

Answer 1

激活状态仅在点击期间设置。

button:active {
background-color: red;
}

<button >Click me</button>

如果您希望按钮在您点击后有不同的外观，您可能需要在点击时为其添加一个类。

function clicked() {
    var element = document.getElementById("button");
    element.classList.add("clicked");
} 

button.clicked {
  background-color: red;
}

<button id="button" onClick=clicked()>Click me</button>