Войти
Регистрация

Как показать элемент, наведя на другой?

Как показать элемент, наведя на другой?

Здравствуйте, веб-мастера!

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

Данное решение используется при создании меню на сайте, когда наведя на пункт меню показывается его подпункты, например. Или подсказки на сайте также реализуются с помощью этого.

Я Вам покажу принцип работы. А вы уже сами решайте, где это лучше использовать и какой дизайн и стили элементов применять.

Сделаем HTML-разметку. Cоздадим 2 блока, а один из них скроем с помощью display:none. Что это за свойство я писал в статье о разнице между display:none и visibility:hidden

<div class="block1"></div>
<div class="block2"></div>

Зададим высоту, ширину и фон блоков:

.block1, .block2 {
   height: 100px;
   width: 100px;
}
.block1 {
   background: #f9da65;
}
.block2 {
   background: #6d96f2;
   display: none;
}

Теперь давайте напишем CSS правило, для того, чтопы при наведении на .block1 показать .block2.

.block1:hover+ .block2 {
   display: block;
}

Здесь мы первому блоку задали псевдокласс :hover, т.е. при наведении на него блоку .block2 задаем свойство display:block

Но здесь есть небольшой нюанс, т.к. display:block скрывает блок полностью, не оставляя за ним место в потоке, а при повлении блок занимает место, верстка может "скакать" при появлении и скрытии блока.

Чтобы это исправить нужно второму блоку задать абсолютное позиционирование и выровнять его положение на сранице.

Посмотрите как работают оба варианта в демо: смотреть демо

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?