Просмотров: 93331

Как сделать чтобы блок открывался

Закрыть ... [X]

Главная Web-дизайн Появление блока при наведении с помощью CSS

как сделать чтобы блок открывался Доброго времени суток. 🙂
Сегодня хочу показать Вам два способа как можно организовать появление блока при наведении на другой блок, используя только CSS.

Пример

Первый способ, когда блок появляется как-бы поверх основного блока, но не выходя за его границы. Данный способ мне пригодился при создании темы для онлайн кинотеатра, а именно для организации появления знака play при наведении на постер фильма.

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

Способ номер один

Данный способ очень простенький и его суть заключается в следующем.

1. HTML разметка

Тут все просто, нужно внутри одного div-а разместить второй как в примере ниже

<div class="holder"> <div class="block"> <h2>Пример</h2> Пример блока, при наведении на который появляется другой блок. </div> </div>

2. Стили CSS

Тут тоже нет ничего сложного, просто прописываем стили для блоков. Для первого задаем размеры и position:relative
для второго position:absolute и позиционирование left, bottom, right, top, также свойство display:none.

.holder{ position:relative; width:300px; height:400px; background:#ff6600; margin:100px auto; }.block{ position:absolute; left:0; bottom:0; right:0; top:0; background:rgba(255,255,255, 0.7); padding:5px; display:none; }.holder:hover.block{ display:block; }

Способ номер два

Данный способ по сути - то же самое, но с некоторым изменением стилей. Для удобства я поменял название классов, чтобы не запутаться.

1. HTML разметка

<div class="poster"> <div class="descr"> Какой-то текст который должен быть в блоке<br> <a href="#">Интересная ссылка</a> </div> </div>

2. Стили CSS

.poster{ position:relative; margin:100px auto; background:#ff6600; height:200px; width:150px; }.descr{ display:none; margin-left:-350px; padding:10px; margin-top:17px; background:#f3f3f3; height:200px; -moz-box-shadow:0 5px 5px rgba(0,0,0,0.3); -webkit-box-shadow:0 5px 5px rgba(0,0,0,0.3); box-shadow:0 5px 5px rgba(0,0,0,0.3); }.poster:hover.descr{ display:block; position:absolute; top:120px; z-index:9999; width:400px; }

Можете все подогнать под свои нужды и если все сделали правильно, то у вас должно получится как в примере.

Пример

На этом Все, спасибо за внимание 🙂


Метки: css div html WordPress без плагина блок верстка всплывающий выноска курсор наведение появление скрипт


Если Вам был полезным мой труд, можете поддержать сайт :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1

Проголосовало: 62, в среднем: 4.9 из 5


Предыдущая запись
Тема онлайн кинотеатр

Следующая запись
Модальное окно с помощью CSS и JavaScript

Похожие записи:
  • Красивый ползунок выбора значения. UI ползунок на сайт
    Красивый ползунок выбора значения. UI ползунок на сайт
  • Изменение, создание, всплывающих подсказок title с помощью CSS
    Изменение, создание, всплывающих подсказок title с помощью CSS
  • Фиксированная, открывающаяся, боковая панель, для меню на сайт
    Фиксированная, открывающаяся, боковая панель, для меню на сайт
  • Всплывающее, модальное окно на сайт в виде пузырьков с анимацией
    Всплывающее, модальное окно на сайт в виде пузырьков с анимацией
  • Выполнение скрипта при прокрутке до нужного места
    Выполнение скрипта при прокрутке до нужного места
чтобы

Нажмите, чтобы добавить код в комментарий


Источник: http://gnatkovsky.com.ua/poyavlenie-bloka-pri-navedenii-s-pomoshhyu-css.html


Поделись с друзьями



Рекомендуем посмотреть ещё:



Как сделать, чтобы блок с полной информацией открывался ниже ряда Как сделать станок по обработке дерева

Как сделать чтобы блок открывался Как сделать чтобы блок открывался Как сделать чтобы блок открывался Как сделать чтобы блок открывался Как сделать чтобы блок открывался Как сделать чтобы блок открывался Как сделать чтобы блок открывался

ШОКИРУЮЩИЕ НОВОСТИ