Отображение элементов после :active

Добрый день. Появилась идея сделать некое подобие всплывающих менюшек. Подскажите, пожалуйста как это лучше реализовать?
https://jsfiddle.net/BlackStar1991/92u1zh55/1/
Идея в следующем - есть набор из кругов-ссылок (в них потом будут помещены фотографии) Возле них находятся блоки с комментариями. (в обычном состоянии невидимы.) После нажатия на картинку отображаются эти блоки + идет смещение последующих кругов-ссылок.

(button)
Вот так оно было бы:
.circle-button:active ~ .textblock{
display: block;
}
Но такой вариант вам вряд ли понравится, потому что ссылка считается активной, пока вы удерживаете ее нажатой.

1 лайк

Почему у вас HTML код так скачет? или у меня он так показывается или вы пишите его так не красиво, серьезно сложно помочь когда не хочется читать такой разбросанный код. Извините за критику если что)

2 лайка

За кривизну написания прошу пардона. :joy: Выдираю из нотпада, чего то идет смещение, в преть постараюсь быть поаккуратнее.
Ineska, чёт не срабатывает у меня ваша рекомендация. https://jsfiddle.net/BlackStar1991/92u1zh55/4/

В html класс не исправили, вот и не работает.

1 лайк

Спасибо, помогло.
https://jsfiddle.net/BlackStar1991/92u1zh55/10/
А вот ещё вопрос, почему при нажатии сама кнопка -ссылка тоже смещается ?
И, да как сделать так что б после нажатия ссылка продолжала быть активной и скажем что б скрыть этот блок с инфой, надо б было нажать другую кнопку?

Действия по нажатию на элемент реализуются с помощью JS или на чистом CSS с помощью input с типом поля radio или checkbox.