单击按钮后如何保持 :active css 样式 [英] How to keep :active css style after click a button

问题描述

单击按钮后，我希望它保持活动样式，而不是返回正常样式.请问这可以用CSS完成吗?我使用 DIVI Theme (WordPress) 中的模糊按钮.请帮帮我！

Once the button is clicked I want it to stay with the active style instead of going back to normal style. Can this be done with CSS please? Im using blurb button from DIVI Theme (WordPress). Please help me!

代码:

    #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; }

推荐答案

CSS

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

CSS

:active denotes the interaction state (so for a button will be applied during press), :focus may be a better choice here. However, the styling will be lost once another element gains focus.

使用 CSS 的最后一个潜在替代方法是使用 :target，假设被点击的项目是在页面内设置路由(例如锚点) - 但是如果您使用路由(例如 Angular)，但这里似乎并非如此.

The final potential alternative using CSS would be to use :target, assuming the items being clicked are setting routes (e.g. anchors) within the page- however this can be interrupted if you are using routing (e.g. Angular), however this doesnt seem the case here.

.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>

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

As such, there is no way in CSS to absolutely toggle a styled state- if none of the above work for you, you will either need to combine with a change in your HTML (e.g. based on a checkbox) or programatically apply/remove a class using e.g. 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>
  

这篇关于单击按钮后如何保持 :active css 样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！