单击按钮后如何保持：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; }

Answer 1

我想通了。简单、有效无 jQUERY

我们将使用一个隐藏的复选框。
这个例子包括一个“on click - off click 'hover / active' 状态”

--

使内容本身可点击：

HTML

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

让按钮改变内容：

HTML

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

希望对你有帮助！

Answer 2

在Divi Theme Documentation 中，它说该主题可以访问“ePanel”，该“ePanel”也有一个“集成”部分。

您应该可以添加此代码：

<script>
 $( ".et-pb-icon" ).click(function() {
 $( this ).toggleClass( "active" );
 });
</script>

进入“集成”选项卡下的“将代码添加到博客头部”的框中，这应该可以让 jQuery 正常工作。

然后，您应该能够根据需要设置类的样式。

Answer 3

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>