Question

[Solved] How to keep :active css style after click a 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; }
Enquirer: Dereck

||

Solution #1:

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>
  

Respondent: SW4

Solution #2:

I FIGURED IT OUT. SIMPLE, EFFECTIVE NO jQUERY

We’re going to to be using a hidden checkbox.
This example includes one “on click – off click ‘hover / active’ state”

To make content itself clickable:

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}

To make button change content:

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}

Hope it helps!!

Respondent: Aaron Fitch

Solution #3:

In the Divi Theme Documentation, it says that the theme comes with access to ‘ePanel’ which also has an ‘Integration’ section.

You should be able to add this code:

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

into the the box that says ‘Add code to the head of your blog’ under the ‘Integration’ tab, which should get the jQuery working.

Then, you should be able to style your class to what ever you need.

Respondent: GKB

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy