Выпадающий блок при наведение клика
 | |
| Вашему вниманию отличное решение спрятать контент под выпадающего блока на 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; } В стилях вы можете выбрать шрифт, но и добавить стилистики, чтоб смотрелось оригинально, хотя по умолчанию отличено все выведено. Демонстрация: | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
