Как показать элемент при наведении мыши

Учимся показывать элементы при наведении мыши

Наведите курсор на меня.
Когда кто-то наводит курсор на верхний div, я появляется.

Как показать элемент при наведении мыши

Шаг 1 - Добавьте HTML:

<div class="myDIV">Наведите курсор на меня.</div>
<div class="hide">Когда кто-то наводит курсор на верхний div, я появляется.</div>

Шаг 2 - Добавьте CSS:

.hide {
  display: none;
}
.myDIV:hover + .hide {
  display: block;
  color: red;
}

Попробуйте сами

Пример объяснения:

Выбор相邻同级选择器 (+) Выбираются все элементы, расположенные рядом с указанным элементом.

Слово «相邻» означает «следующий за ним», в примере выбраны все элементы, имеющие class=".hide" Элементы, которые размещаются сразу за элементами, когда они悬停,紧接着放置在带有 class=".myDIV" после элемента.

Соответствующие страницы

Учебник:Комбинатор CSS