ZorNet.Ru — сайт для вебмастера » HTML и CSS » Спойлер с открытием при наведение клика

Спойлер с открытием при наведение клика

Оригинальный сполер для сайта, что открываться при наведение клика на название, что к нему прикреплено и закрываться автоматически. Можно написать ключевое слово и всю информацию разместить под spoiler, это делается для того, чтоб в мануале или статье, как можно мало место было, а не большая простыня.

Также вы сможете поставить изначальное описание, что визуально будет видно. Это для того делается, чтоб понять, вообще, что там написано. Здесь нет не какого скрипта, где все работает на стилях, что не какой нагрузки на страницу не будет, да и сам материал уникально смотреться по визуализации будет.

Приступаем к установке:

Создается блок, где скрытие происходит.

Код

<div id="block">
Здесь идет ваше описание или обень большая статья, где изначально первые строки видны.
</div>

CSS:

Код

#block {
  width: auto;
  height: 50px;
  overflow: hidden;
  padding: 5px 10px;
  font-size: 14px;
}

#block:hover {
  height: auto;
  cursor: pointer;
}

Все как понимаете не сложно, как работает, вы можете посмотреть на демонстраций, что представлена к материалу.

16 Ноября 2017 Просмотров: 1719 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0