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

Выпадающий блок при наведение клика

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

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

Но теперь переходим к рассмотрению по реализаций этого эффекта, что создан на чистом CSS.

Раскрывающийся блок


Так он визуально в открытом режиме смотрится:

Блок под контент на сайте

HTML

Код
<div id="zornet_ru_sakertun">
  <b>Наведете на меня</b><br><br>
  Switch уже является одной из самых продаваемых консолей в истории. Если в этот праздничный сезон все будет хорошо, это может лидировать для лучших первых летних показателей.
  <hr>  
Electronic Arts заявила, что не может вернуть микротранзакции обратно в Battlefront II после удаления их всего за несколько часов до запуска, но она все еще описывает свои собственные действия в смешных условиях.  
</div>

Javascript

Код
$("#zornet_ru_sakertun").mouseenter(function(){
  $(this).animate({height: "100%"}, 500);
   
  $(this).mouseleave(function(){
  $(this).animate({height: "5px"}, 500);
  });
});

CSS

Код
* {
  font-family: Arial;
  font-size: 13px;
}

#zornet_ru_sakertun {
  background:#ffac41;
  padding:19px;
  overflow:hidden;
  width:30%;
  height:12px;
  cursor: pointer;
}

#zornet_ru_sakertun_id_320_js {  
  background:#ccc;  
  padding:10px;  
  overflow:hidden;  
  width:230px;  
  height:35px;  
  cursor:pointer;  
  transition: 0.5s height ease-in;  
  }  
#zornet_ru_sakertun_id_320_js:hover { height:250px; }

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

Демонстрация:
15 Декабря 2017 Просмотров: 1484 Комментариев: (1)

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

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

Оставь свой отзыв

Комментарии: 1
-SAM-
-SAM- 20 Декабря 2017 06:231
0
"Но теперь переходим к рассмотрению по реализаций этого эффекта, что создан на чистом CSS." -> по факту здесь раскрытие идёт используя подключенный jQuery и про чистоту работы (без скрипта) - речи идти не может здесь (другие материалы уже публиковались, что без использования скрипта - ограничение вывода содержимого в блоке, что при наводке блочное отображение ранее скрытого делать и изменение высоты блока).
avatar