如何在点击按钮后保持 :active 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; }

- Dereck

---

这些信息太少了。这个按钮是做什么的？它会把你重定向到一个新页面吗？你的HTML是什么样子的？你期望的结果是什么？ - timo

Jquery addClass - Bugfixer

我正在尝试在WordPress中放置这段功能性代码...但是当我单击我的网页上的图标/图像时，它不能保持选定状态。出了什么问题？ 代码: http://jsfiddle.net/La8wQ/660/ - Dereck

很酷，我写的代码仍在使用！原文：https://dev59.com/HmMm5IYBdhLWcg3whfae#20430219 - Richard Cotrina

Answer 1

CSS

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

最终使用 CSS 的潜在替代方案将是使用 :target，假设被点击的项目设置了页面内路由（例如 anchors） - 但是，如果您正在使用路由（例如 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

---

我可以将那个CSS代码用在图片上而不是链接/按钮上吗？ - Dereck

:target 只能与导航路由一起使用，因此页面的 URL 需要相应更改，所以将图像包装在 a 中。focus 需要一个可切换的元素，因此请在图像上设置 tabindex='0'。 - SW4

Answer 2

我们将使用一个隐藏的复选框来实现。这个例子包括一个“点击-悬停/活动状态”的开关功能。

--

为了使内容本身具有可点击性：

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}

希望我的帮助能够有所裨益！

- Aaron Fitch

Answer 3

在Divi主题文档中，它说该主题附带访问“ePanel”，其中还有一个“Integration”部分。

您应该能够添加此代码：

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

在“集成”选项卡下，将代码添加到博客头部的框中，这样应该就可以让jQuery起作用了。然后，您就可以根据需要对类进行样式设置。

- GKB