Всплывающеий блок при наведении мышки, hover, как заменить на клик?

Всем привет.
Есть удобная конструкция, когда надо показать подменю на любом предмете, ссылка или svg и т.д.
Работает при наведение мышки, hover, а как можно сделать при клике чтоб всплывала и оставалась, закрытие тож при клике либо в любом месте кроме формы либо клик на туже ссылку когда кликали чтоб открыть.

Если без js нельзя, тогда как на js дописать такую возможность.

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

Пример тут:
https://codepen.io/AXOT/pen/eYjeKjb
  • Вопрос задан
  • 102 просмотра
Решения вопроса 3
MrDecoy
@MrDecoy Куратор тега CSS
Верставший фронтендер
Например, с помощью чекбокса.
<label for="trigger">Пробег</label>
<strong>Выбрать</strong>
<input type="checkbox" id="trigger">


#trigger:checked ~ .prcr {
/* .pro:hover .prcr { */
  display: block;
  opacity: 1;
  visibility: visible;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}


Осталось его скрыть и увеличить зону кликабельности лэйбла как Вам надо, а не только на слово "Выбрать"
Ответ написан
@Niksak
Можно вставить по нажатию на этот элемент класс Active элементу который нужно отобразить ( в классе прописать display: block и т.д ).
При нажатии снова на элемент или за пределами убрать класс.
При каждом клике делать проверку, если класс уже есть ( classList contains ) то значит его удалять, если нет еще - то добавлять
Ответ написан
ws17
@ws17 Автор вопроса
Вообщем помогли сделать, за деньги.

Может кому надо:
https://codepen.io/AXOT/pen/JjBLWXK
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы