如何保持:单击按钮后激活css样式

Question

单击按钮后,我希望它保持活动样式而不是恢复正常样式.这可以用CSS完成吗？我使用DIVI主题(WordPress)的blurb按钮.请帮我!

码:

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

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>
  

Answer 2

我们将使用隐藏的复选框。
该示例包括一种“点击时-点击时‘悬停/活动’状态”

--

要使内容本身可点击：

超文本标记语言

<input type="checkbox" id="activate-div">
  <label for="activate-div">
   <div class="my-div">
      //MY DIV CONTENT
   </div>
  </label>

CSS

#activate-div{display:none}    

.my-div{background-color:#FFF} 

#activate-div:checked ~ label 
.my-div{background-color:#000}

要使按钮更改内容：

超文本标记语言

<input type="checkbox" id="activate-div">
   <div class="my-div">
      //MY DIV CONTENT
   </div>

<label for="activate-div">
   //MY BUTTON STUFF
</label>

CSS

#activate-div{display:none}

.my-div{background-color:#FFF} 

#activate-div:checked + 
.my-div{background-color:#000}

希望能帮助到你！！