Как сделать - отображать элемент при наведении
Узнайте, как отображать элемент при наведении.
Наведите надо мной.
I am shown when someone hovers over the div above.
Как отобразить элемент при наведении
Шаг 1) Добавьте HTML:
Пример
<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when
someone hovers over the div above.</div>
Шаг 2) Добавьте CSS:
Пример
.hide {
display: none;
}
.myDIV:hover + .hide {
display: block;
color: red;
}
Объяснение примера
Селектор соседнего элемента ( +
) выбирает все элементы, являющиеся соседними элементами указанного элемента.
Слово «смежный» означает «сразу следующий», и в приведенном выше примере выбираются все элементы с class=".hide"
, которые размещаются сразу после элементов с class=".myDIV
«, при наведении курсора.
Перейдите к нашему учебному пособию по комбинаторам CSS , чтобы узнать больше о смежных селекторах.