Как показать DIV блок, при наведении курсора / CSS без JS

Здравствуйте. В этой статье я покажу вам как показать div блок, при наведении курсора на другой DIV.

Самый лучший вариант реализовать данную задумку это использовать вложенность блоков друг в друга. При помощи CSS свойств :hover мы покажем наш скрытый блок.

Что у нас получится в итоге:

Что получится в итоге

1. HTML разметка

<div class="info__header">
   <div class="info__body">
      <span>Lorem input</span>
   </div>
</div>

2. CSS свойства

.info__header {
   position:relative;
   width:150px;
   height:150px;
   background:#000;
   border-radius: 500px;
}
.info__body {
   position:absolute;
   display:none;
   font-size: 20px;
   color: #000;
   background:#fff;
   padding: 20px;
   top: 30%;
   left: 5px;
}
.info__header:hover {
   cursor: pointer;
}
.info__header:hover .info__body {
   display: block;
}	

Наш .info__body можно позиционировать как угодно, можно вывести его за пределы родительского блока .info__header с помощью свойств: «top» и «left» в свойствах .info__body.

Если есть вопросы, то задавайте их в комментариях, отвечу на все вопросы.

Плавное появление блока DIV при наведении на другой блок DIV

По сути всё остаётся одно и тоже, только меняется способ показа блока, в первом примере у нас за появление нашего скрытого блока, отвечает свойство display:block; изначально у блока который должен появится стоит свойство display:none;.

Всё отлично работает, но нет плавности. Что бы получить ту самую плавность, мы меняем свойство display:none; на opacity: 0;, а свойство display:block; на opacity: 1;

Сейчас не поменялось нечего, но если мы добавим свойство transition: 1s;, то мы получим ту самую плавность анимации.

Теперь наш CSS код будет выглядеть таким образом

.info__body {
   position:absolute;
   opacity: 0;
   font-size: 20px;
   color: #000;
   background:#fff;
   padding: 20px;
   top: 30%;
   left: 5px;
}
.info__header:hover .info__body {
   transition: 1s;
   opacity: 1;
}

transition: 1s; — Скорость анимации 1s — 1 сек. лучше ставить 0.4s тогда получится корректная скорость анимации.

Теперь наше появление блока при наведении на другой блок выглядит более красиво, и естественно

Плавное появление блока при наведении на другой блок
Максим Борисенко

Веб-разработчик
Основатель MAKBORI

Блог Максима Борисенко - разработка и продвижение сайтов
Добавить комментарий

  1. Аватар
    Иван

    Ох как долго я искал это.. Спасибо, тебе друг!

    Ответить
    1. Максим Борисенко
      Максим Борисенко автор

      Всегда пожалуйста!

      Ответить
  2. Аватар
    Лена

    Ja разве не нужно писать ?

    Ответить
    1. Максим Борисенко
      Максим Борисенко автор

      Вовсе нет, в статье всё описал

      Ответить