- 15 Дек 2014г
- 44557
- 41
- Рубрика: 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; }
Можете все подогнать под свои нужды и если все сделали правильно, то у вас должно получится как в примере.

На этом Все, спасибо за внимание 🙂
Комментариев: 1
dcfdacdwccwscw
Комментариев: 513
Проверка, связи? 🙂
Комментариев: 1
Спасибо за вашу статью, очень интересна. Скажите а можно ли сделать чтобы блок появлялся через несколько секунд сам, а не при наведении.
Комментариев: 513
У меня есть статья, как сделать окно, которое появляется с задержкой после загрузки сайта. http://gnatkovsky.com.ua/vsplyvayushhee-modalnoe-okno-pri-zagruzke-sajta-s-zaderzhkoj.html
Комментариев: 1
Спасибо. Целый день искал пока наконец, не разобрался благодаря вам. Правда использовал (visibility) для лучшего эффекта, но суть понял именно здесь. Понятно и доступно.
Комментариев: 513
Очень рад, что помог 🙂
Комментариев: 1
Добрый день. Спасибо большое за ваш второй способ, подошел как нельзя лучше. Другие методы с js не подходили, очень удивился такому простому решению 🙂
Комментариев: 513
Когда-то оно и меня очень выручило 🙂
Комментариев: 1
А как сделать вместо блока картинку?
Комментариев: 513
Добавьте в блок картинку.
Комментариев: 1
А как сделать что бы при наведении на блок с картинкой, с верху и с низу как бы наплывали две полоски с информацией? буду благодарен за ответ)
Комментариев: 3
Ваш код не будет работать в IE8 и более старых версиях, можно сделать следующим образом:
<div id="div_1" OnMouseOver="document.getElementById('div_2').style.display = 'block';"
OnMouseOut="document.getElementById('div_2').style.display = 'none';">
что либо, на что наводим
<div id="div_2">
при наведении, всплывает div
</div>
</div>
#div_1 {background:#ff6600; position:relative; width:200px; padding:10px;}
#div_1 #div_2 {background:#f3f3f3; display:none; position:absolute; left:0px; top:40px; z-index:5; width:200px; padding:10px;}
Так будет работать, но сверху будет вылезать сообщение с надписью, что IE в целях безопасности не разрешает выполнение веб сценариев и пользователь действует на свой страх и риск.
Комментариев: 3
Либо к вашему примеру в начале html-файла надо прописывать
Или какой-нибудь другой доктайп. Без доктайпа IE8 переходит в quirks mode, где hover работает только с элементом .
Комментариев: 3
В начале html-файла надо прописывать:
<!DOCTYPE html>
Комментариев: 2
Добрый день. Спасибо за пример. Есть вопрос: как сделать что бы при загрузке страницы был активен ahover, способ номер 2. Т.е. наведение мыши на блок, при загрузке страницы, уже есть.
Например: 3 пользователя, каждому пользователю присвоено имя. Имя для всех 3-х пользователей выводится в одном и том же месте на странице. При загрузке страницы мы видим пользователя 1 и его имя, водим мышкой по пользователям и видим как меняется имя.
Спасибо.
Комментариев: 513
Что-то мне подсказывает, что Вам подойдет или этот материал http://gnatkovsky.com.ua/taby-ili-panel-vkladok-s-pomoshhyu-css.html
или этот, правда тут при нажатии, а не наведении - http://gnatkovsky.com.ua/taby-ili-panel-vkladok-v-wordpress-bez-plaginov.html
Комментариев: 1
Спасибо!
Перепробовал несколько других способов - не работало.
Использовал ваш "второй способ" - то, что нужно!
Комментариев: 1
Добрый день у меня второй способ почему то окно выходит в первом блоке но не выходит за его границы, а так как первый блок маленький то подсказка виднана половину. как можно решить эту задачу?
Комментариев: 1
Ребят, решение очень класное но я не могу добавить transition. Кто то знает как или в чем может бить косяк? Буду благодарен за помощь!!!
Комментариев: 513
Что именно вы добавляете?
Комментариев: 3
Здравствуйте, спасибо, все работает. Но есть один вопрос, как в способе №2 , при наведении блок появлялся через 2 сек. Почему-то transition:2s; не работает, хотя написано все правильно.
Заранее спасибо за ответ.
Комментариев: 513
Попробуйте прописать так:
-webkit-transition: 0.5s ease-out;
-webkit-transition-delay: 2s;
transition: 0.5s ease-out;
transition-delay: 2s;
Данная анимация срабатывает с задержкой в 2 сек и появляется за 0.5 сек.
Комментариев: 3
Почему-то, все равно не работает.
Комментариев: 513
Для .poster:hover .descr добавляли?
Комментариев: 3
Да. Уже все испробовал, ничего не помогает.
Комментариев: 513
Что-то не правильно добавляете, я проверил работает. Изучите немного вопрос с анимацией css. Решите эту задачу и в будущем пригодится 🙂
Комментариев: 1
Подскажите пожалуйста, как сделать такой же эффект появления только при наведении на ссылку
Комментариев: 513
Вам поможет второй способ 🙂 Только вместо родительского блока используйте ссылку.
Комментариев: 2
Добрый день.
Не могли бы вы уточнить чуть подробнее? Для ссылки я должен прописать класс? Просто не получается, когда пишу просто конструкцию типа:
About
Contacts
Map
Story
Brand
.sub_menu {
display: none;
}
.menu ul li:nth-child(1) a:hover .sub_menu{
display: block;
}
Комментариев: 2
Пропал весь html-код. Жаль
Комментариев: 4
Добрый день!
Можно ли Ваш метод применить к ячейке в таблице? То есть при наведении на tr или td должен всплывать блок с информацией, вроде небольшой визитки.
Комментариев: 513
Второй способ используйте. Просто примените классы к ячейке таблицы вместо родительского блока.
Комментариев: 1
Добрый день! Огромное спасибо за ваши оба способа! Можно ли сделать так, что блок будет исчезать при нажатии на блок, а не наведении? То есть сделать окошко которое можно закрыть. Или это Javascript только может сделать?)
Комментариев: 513
Здравствуйте. Да нужно переделывать и добавлять Java.
Комментариев: 1
День добрый!
Тоже самое делаем плагин для вордперсса мегаменю, но когда начал проверят код, и обнаружил некоторые ошибки и куча куча КУЧА!!!! кода...
Буду использовать Ваш метод, только у меня вопрос Как деативировать открывающуюся область для мобильных устройств?
Соответственно идея это боковое меню в виджете с картинками и подменю.
Комментариев: 513
Попробуйте с помощью CSS, а именно @media (max-width: - почитайте о нем и поймете как ним пользоваться.
Комментариев: 1
Ок, Спасибо
Комментариев: 3
Я только начинающий, так что строго не судитее... вставляю описание стиля css через фтп в файл style.css, вставляю 2 код в нужное мне место и ничего не происходит... что я упусти?)
Комментариев: 3
Точнее текст появляется но при наведении мыши не появляется всплывающие окно из 2 примера
Комментариев: 513
В скайп напишите или на почту, скиньте ссылку на сайт, где применяете, я укажу где допущена ошибка.
Комментариев: 1
Спасибо, всё получилось - 1 способ!