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

Появление блока при наведении с помощью 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. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 58, в среднем: 4.9 из 5

Опубликовано 35 комментариев

  • rAmil
    Комментариев: 1

    dcfdacdwccwscw

  • Biobiojal
    Комментариев: 1

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

    • Виталий
      Комментариев: 459

      У меня есть статья, как сделать окно, которое появляется с задержкой после загрузки сайта. http://gnatkovsky.com.ua/vsplyvayushhee-modalnoe-okno-pri-zagruzke-sajta-s-zaderzhkoj.html

  • deepperr
    Комментариев: 1

    Спасибо. Целый день искал пока наконец, не разобрался благодаря вам. Правда использовал (visibility) для лучшего эффекта, но суть понял именно здесь. Понятно и доступно.

  • Алес Болтов
    Комментариев: 1

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

  • Djcrysis
    Комментариев: 1

    А как сделать вместо блока картинку?

  • Дима
    Комментариев: 1

    А как сделать что бы при наведении на блок с картинкой, с верху и с низу как бы наплывали две полоски с информацией? буду благодарен за ответ)

  • shkip3r
    Комментариев: 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 в целях безопасности не разрешает выполнение веб сценариев и пользователь действует на свой страх и риск.

  • shkip3r
    Комментариев: 3

    Либо к вашему примеру в начале html-файла надо прописывать
    Или какой-нибудь другой доктайп. Без доктайпа IE8 переходит в quirks mode, где hover работает только с элементом .

  • Александр
    Комментариев: 2

    Добрый день. Спасибо за пример. Есть вопрос: как сделать что бы при загрузке страницы был активен ahover, способ номер 2. Т.е. наведение мыши на блок, при загрузке страницы, уже есть.
    Например: 3 пользователя, каждому пользователю присвоено имя. Имя для всех 3-х пользователей выводится в одном и том же месте на странице. При загрузке страницы мы видим пользователя 1 и его имя, водим мышкой по пользователям и видим как меняется имя.
    Спасибо.

    • Виталий
      Комментариев: 459

      Что-то мне подсказывает, что Вам подойдет или этот материал 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. Кто то знает как или в чем может бить косяк? Буду благодарен за помощь!!!

  • Игорь
    Комментариев: 3

    Здравствуйте, спасибо, все работает. Но есть один вопрос, как в способе №2 , при наведении блок появлялся через 2 сек. Почему-то transition:2s; не работает, хотя написано все правильно.
    Заранее спасибо за ответ.

    • Виталий
      Комментариев: 459

      Попробуйте прописать так:
      -webkit-transition: 0.5s ease-out;
      -webkit-transition-delay: 2s;
      transition: 0.5s ease-out;
      transition-delay: 2s;
      Данная анимация срабатывает с задержкой в 2 сек и появляется за 0.5 сек.

  • Игорь
    Комментариев: 3

    Почему-то, все равно не работает.

  • Игорь
    Комментариев: 3

    Да. Уже все испробовал, ничего не помогает.

    • Виталий
      Комментариев: 459

      Что-то не правильно добавляете, я проверил работает. Изучите немного вопрос с анимацией css. Решите эту задачу и в будущем пригодится 🙂

  • Vitaly
    Комментариев: 1

    Подскажите пожалуйста, как сделать такой же эффект появления только при наведении на ссылку

  • Сергей
    Комментариев: 1

    Добрый день!
    Можно ли Ваш метод применить к ячейке в таблице? То есть при наведении на tr или td должен всплывать блок с информацией, вроде небольшой визитки.

    • Виталий
      Комментариев: 459

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

  • Мария
    Комментариев: 1

    Добрый день! Огромное спасибо за ваши оба способа! Можно ли сделать так, что блок будет исчезать при нажатии на блок, а не наведении? То есть сделать окошко которое можно закрыть. Или это Javascript только может сделать?)

  • Виталий
    Комментариев: 1

    День добрый!
    Тоже самое делаем плагин для вордперсса мегаменю, но когда начал проверят код, и обнаружил некоторые ошибки и куча куча КУЧА!!!! кода...
    Буду использовать Ваш метод, только у меня вопрос Как деативировать открывающуюся область для мобильных устройств?
    Соответственно идея это боковое меню в виджете с картинками и подменю.

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

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

Привет дорогой друг

У тебя установлено расширение AdBlock или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие. Инструкция как отключить AdBlock Хочу такое же окошко