Главная
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;
}

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

Пример

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




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


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(32 голоса, в среднем: 4.9 из 5)

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

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

    dcfdacdwccwscw

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

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

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

      У меня есть статья, как сделать окно, которое появляется с задержкой после загрузки сайта. 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 работает только с элементом .

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

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

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

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

Это не спам *

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