如何保持：点击一个按钮后的活动css样式 [英] How to keep :active css style after click a button

问题描述

点击按钮后，我希望它保持活动风格，而不是回到正常风格。这可以用CSS做吗？我使用Blurb按钮从DIVI主题（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; } 
  

解决方案

CSS

：active 表示交互状态（因此，在按下期间将应用按钮），：focus 可能是一个更好的选择。

使用CSS的最终潜在替代方法是使用：target ，假设被点击的项目是在页面中设置路由（例如锚点） - 但是如果你使用路由（例如Angular）可以中断，但是这里似乎不是这样。

  .active：active {color：red;} focus：focus {color：red;}：target {color：red;}  / pre> 
 < button class ='active'> Active< / button>< button class = 'focus'> Focus< / button>< a href ='＃target1'id ='target1'class ='target'> Target 1< / a>< a href ='＃target2'id = 'class ='target'>目标2< / a>< a href ='＃target3'id ='target3'class ='target'>目标3< / a>  pre> 

Javascript / jQuery

在CSS中无法绝对地切换样式状态 - 如果上述任何一个都不适用于您，则需要结合HTML中的更改（例如，基于复选框）或编程应用/删除类使用例如。 jQuery

  $（'button'）。on（'click'，function（）{$（'button'）。removeClass '）; $（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>  

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!

code:

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

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>

Javascript / 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>
  

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