Спойлер на CSS (скрытый блок, отображающийся при наведении)

 Наши веб страницы выглядят всегда для разных людей не однозначно! Здесь можно описать все фразой, сколько людей, столько и мнений. При этом ее кому-то кажется, что скажем страница перегружена картинками, контентом и тому подобным,  кому-то может не хватать мелочей.  Вот что делать в такой неоднозначной ситуации?
 Ответ весьма прост и он уже давно известен. Необходимо скрывать часть информации, а при необходимости, то есть если у пользователя возникнет желание узнать подробности в виде картинок или комментариев, отображать еще что-то дополнительно. Среди веб-мастеров, веб-верстальщиков такая дополнительная всплывающая информация называется спойлер.

Сразу скажу, что этот спойлер можно реализовать разными способами. Речь сейчас не идет об алгоритмах в разных языках, там тоже возможно инварианты, речь сейчас именно о выборе языка. Так я уже приводил подобный пример с JS (JavaScript), где при определенном событии, здесь уже не важно что, у нас появлялся дополнительный блок, то есть наш так называемый спойлер с той самой дополнительной информацией.

И приведенный пример вполне себе не плох, однако он не единичен! У него есть как свои плюсы, так и свои минусы. Что на счет плюсов, то он весьма универсален на события, то есть мы можем прикрутить любое событие, которое поддерживается JS, дабы наш скрипт с ним работал. Однако опять же, это же дополнительный скрипт, дополнительный сценарий и все в таком духе...

Что же, сегодняшний вариант будет для появляющегося блока на CSS, то есть блок будет становиться видимым при наведении на какой либо элемент курсора мышки. Если вы помните, то в операторах CSS это hover, то есть парить. зависать и т.д. Хотя у меня появляются сразу какие-то ассоциации с китайским кроссовером, но не об этом...

Итак, далее представляю вам пример на чистом CSS и приведу код. Все как всегда.

Смотреть код

Собственно если кратко дать комментарии, то вначале есть пару блоков, причем один в другом. При этом один из блоков со стилем не отображаться. Однако при наведении меняется его стиль на отображаться и он нам становиться видим. Никакой магии, никаких JS, все на чистом CSS. Минусом можно считать все же то, что нет фиксации спойлера в состоянии отображаться при разовом клике.

Второй пример отличается тем, что для первого случая при появлении спойлера он удерживается за счет стиля прописанного для появившегося блока (Содержание 1, class="content") при наведении, а второй вариант (Вкладка 2) блока, предусматривает не наведение, а клик, то есть кликам и появляется спойлер.

Смотреть код

В целом это тоже самое, только здесь применяется либо оператор hover либо active.

Еще один пример пригодится в том случае, если вам надо кликнуть и что-то увидеть. Собственно так было и во втором примере, только отображаемая часть появлялась именно на момент клика, а дальше, как только кнопку отпускали, все пропадало. Здесь мне пришло в голову использование стиля для ссылок, когда после активации ссылки она меняет цвет шрифта. Если скажем первоначально он был белый, что собственно можно приравнять к невидимому, неотображаемому блоку, то после посещения ссылки, она становится другого цвета и ее видно, а значит видно контент. Здесь есть минусы. Первый, контент уже есть на странице и он занимает место. Второй, это по факту не скрытие контента, а использование свойств хамелеона, когда оно есть, но его не видно. Такое не любят поисковики. Еще один минус в том, что ссылка откроется и запомнится браузером как visited и потом при последующем посещении контент будет отображаться сразу, пока не сбросится кеш. В общем такое, но работает!

Смотреть код

...

Используется тег details, так вот если им обрамить текст, то собственно уже все получится, заголовок заворачиваем внутрь details и в тег summary.