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

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

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

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

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

 

Смотреть код

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