Question

我有一组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>

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>

Answer 2

不是使用按钮上的:active，而是使用jQuery动态添加类.active。

$('.tablinksClipper ').on('click', function(){

$(this).addClass('active');
});

然后您可以使用

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

CSS帮助：活动按钮不会更改样式

2 个答案: