ВОПРОС
Всем привет. Мне нужна ваша помощь в решении небольшой проблемы. Кнопка на моем веб-сайте сразу возвращается к обычному состоянию, после того, как пользователь нажмет на нее. Я хочу сделать так, чтобы даже после нажатия она сохраняла свое активное состояние.
Если это пригодится, то я использую этот элемент в рекламном блоке на странице темы DIVI. Я очень надеюсь, что у вас есть какое-нибудь предложение, которое поможет мне.
На всякий случай я прикладываю код, который отвечает за изменение стиля:
#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; }
ОТВЕТ
Привет, я полностью понял, что тебе нужно. В общем, я могу предложить тебе достаточно интересное и небанальное решение.
Мы с тобой будем использовать скрытый флажок. Он будет иметь только одно состояние после щелчка – это active.
Вот этот вариант сделает контент твоего сайта интерактивным:
HTML-код:
<input type=”checkbox” id=”activate-div”>
<label for=”activate-div”>
<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>
//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}
Пользуйся, тестируй, задавай вопросы. Очень надеюсь, что мой ответ поможет тебе реализовать то, что ты хочешь.
