单击按钮后如何保持：active css样式

Question

单击按钮后，我希望它保持活动样式而不是恢复正常样式。请问这可以用CSS完成吗？我正在使用 DIVI Theme (WordPress) 中的简介按钮。请帮我！

代码：

     #blurb-hover.et_pb_blurb .et_pb_blurb_content
    .et_pb_main_blurb_image .et-pb-icon:hover {
           color: red !important; }

    #blurb-hover.et_pb_blurb .et_pb_blurb_content
    .et_pb_main_blurb_image .et-pb-icon:selected {
      background-color: #ff4b46;
      color: #fff; }

    #blurb-hover.et_pb_blurb .et_pb_blurb_content
    .et_pb_main_blurb_image .et-pb-icon:active {
        color: white !important;
       background-color: red;
        width: 140px;
        height: 100px; }

原文由 Dereck 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

CSS

:active 表示交互状态（因此在按下期间将应用按钮）， :focus 在这里可能是更好的选择。但是，一旦另一个元素获得焦点，样式就会丢失。

使用 CSS 的最终潜在替代方案是使用 :target ，假设被单击的项目在页面内设置路由（例如锚点） - 但是如果您使用路由（例如 Angular），这可能会被中断，但是这似乎不是这里的情况。

 .active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

 <button class='active'>Active</button>
<button class='focus'>Focus</button>
<a href='#target1' id='target1' class='target'>Target 1</a>
<a href='#target2' id='target2' class='target'>Target 2</a>
<a href='#target3' id='target3' class='target'>Target 3</a>

Javascript/jQuery

因此，在 CSS 中没有办法 绝对 切换样式状态 - 如果以上方法都不适合您，您将需要结合 HTML 中的更改（例如基于复选框）或以编程方式应用/删除一个使用例如 jQuery 的类

 $('button').on('click', function(){
    $('button').removeClass('selected');
    $(this).addClass('selected');
});

 button.selected{
  color:red;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Item</button><button>Item</button><button>Item</button>

原文由 SW4 发布，翻译遵循 CC BY-SA 3.0 许可协议