时间戳

首页 > 解决方案 > CSS帮助：活动按钮不改变样式

html - CSS帮助：活动按钮不改变样式

问题描述

我有一组 3 个按钮（虽然一个是隐藏的），但是当一个按钮处于活动状态时，即被单击时，它的背景颜色不会从 #36A9E1 变为 #F9B233。:hover 状态表现良好；只有 :active 状态才有趣。

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

链接：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>

标签： htmlcssbutton

解决方案

活动状态仅在单击期间设置。

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>

推荐阅读