Отображать элемент div при наведении курсора на тег <a> с помощью CSS

Опубликовано: 2 Февраля, 2022

Мы можем применить CSS для отображения элемента div при наведении курсора на тег, используя соседний родственный селектор . Селектор смежного родственного элемента используется для выбора соседнего элемента или элемента, следующего за указанным тегом селектора.
Этот комбинатор выбирает только один тег, который находится рядом с указанным тегом.

Чтобы отобразить элемент div с помощью CSS при наведении на тег:

Сначала установите невидимый элемент div, то есть display: none ;.
Во-вторых, используя соседний родственный селектор и наведите указатель мыши на тег, чтобы отобразить элемент div.

Example: This Example illustrates how to display the div element on hovering a tag.

<html>
  
<head>
    <style>
        h1 {
            color: green;
        }
          
        div {
            display: none;
        }
          
        a:hover + div {
            display: block;
            color: green;
            font-size: 25px;
        }
    </style>
</head>
  
<body style="text:align:center;">
    <h1>GeeksforGeeks</h1>
    <b>
      Hovering below element to see 
      the <div> element.
  </b>
    <br>
    <br>
    <a>GeeksforGeeks</a>
    <div>
      A computer science portal for Geeks.
  </div>
</body>
  
</html>

Выход:
Перед наведением курсора на тег:

После наведения курсора на тег:

Picked CSS-Misc CSS

Отображать элемент div при наведении курсора на тег <a> с помощью CSS

РЕКОМЕНДУЕМЫЕ СТАТЬИ