Как сохранить: активный стиль css после нажатия кнопки

Как только кнопка нажата, я хочу, чтобы она оставалась с активным стилем, а не возвращалась к нормальному стилю. Можно ли это сделать с помощью CSS? Я использую кнопку "Сброс" из темы 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; }

Ответ 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>

Ответ 2

В Divi Theme Documentation говорится, что тема имеет доступ к "ePanel", который также имеет раздел "Интеграция".

Вы должны иметь возможность добавить этот код:

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

в поле с надписью "Добавить код в голову вашего блога" на вкладке "Интеграция", которая должна заставить работать jQuery.

Затем вы должны уметь стилизовать свой класс к тому, что вам нужно.

Ответ 3

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

Ответ 4

Я НАПИСАЛ. ПРОСТОЙ, ЭФФЕКТИВНЫЙ NO jQUERY

Мы собираемся использовать скрытый флажок.
Этот пример включает в себя один "щелчок мышью", "зависание/активное состояние"

Чтобы сделать сам контент интерактивным:

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}

Надеюсь, что это поможет!