Узнать, как создать отображение элемента при наведении используя HTML, CSS.
Отображение элемента при наведении
Наведите курсор на меня.
Я отображаюсь, когда кто-то наводит курсор на div выше.
Создать отображение элемента при наведении
Шаг 1) Добавьте HTML:
<div class="myDIV">Наведите курсор на меня.</div>
<div class="hide">Я отображаюсь, когда кто-то наводит курсор на div выше.</div>
Шаг 2) Добавьте CSS:
.hide {
display: none;
}
.myDIV:hover + .hide {
display: block;
цвет: красный;
}
Попробуйте сами »
Объяснение примера
Селектор смежных элементов (+
) выбирает все элементы, которые являются смежными элементами указанного элемента.
Слово «смежный» означает «непосредственно следующий», и пример выше выбирает все элементы с class=".hide"
, которые размещаются сразу после элементов с class=".myDIV
, при наведении.
Перейдите на наш Учебник по CSS Combinators, чтобы узнать больше о смежных селекторах.