Отображение скрытых элементов при наведении мыши на гиперссылку или на тег <a>

При наведении мыши скрытые элементы HTML могут стать видимыми с помощью CSS. В этой статье вы научитесь, как отображать скрытые элементы. Можно применять CSS для отображения любого HTML-элемента при наведении мыши на тег <a>, используя смежные одноуровневые селекторы. Смежный одноуровневый селектор используется, чтобы выбрать смежный элемент или элемент, находящийся рядом с указанным тегом селектора. Этот комбинатор выбирает только один тег, который находится рядом с указанным тегом.

Рассмотрим пример и попробуем разобраться с каждой частью кода.

1.Создайте HTML

  • Можно добавить тег <center> в разделе <body> для выравнивания контента по центру (тег <center> не поддерживается в HTML5). Вместо этого можно также использовать CSS свойство text-align со значением “center”.
  • Добавьте тег <h2> и напишите в нем контент.
  • Добавьте тег <b> или <strong> для выделения указанной части текста жирным шрифтом, чтобы он был заметен для пользователя.
  • Добавьте тег <br>, который указывает разрыв строки.
  • Добавьте тег<a>, используемый для вставки гиперссылок на другие страницы, или файлы, местоположения на одной и той же странице, электронные почты, или любой другой URL.
  • Создайте тег <div> и напишите в нем контент.
<body>
    <center>
      <h2>W3docs</h2>
      <b> 
     Наведите мышь на элемент внизу, чтобы увидеть div-элемент. 
      </b> 
      <br> 
      <br>
      <a href=”https://www.w3docs.com/”>W3docs</a> 
      <div> 
       Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
      </div>
    </center>
  </body>

2. Добавьте CSS

  • Выберите цвет для тега <h2> с помощью свойства color.
  • Используйте свойство display для <div> и задайте значение "none". Это значит, что элемент не будет отображаться.
  • Используйте свойство border, чтобы добавить границу к div, и задайте значения свойств border-width, border-style и border-color.
  • Используйте свойство cursor со значением "pointer" для тега <a>.
  • Используйте смежный одноуровневый селектор. В нашем примере выбраны все элементы <div>, находящиеся сразу после элемента <a>:
  • Используйте свойство display и задайте значение "block".
  • Задайте цвет текста с помощью свойства color. Можете выбрать любой цвет из инструмента Выбор цвета.
  • Задайте font-size для div.
h2 { 
color: #4287f5; 
} 
div { 
display: none; 
border: 5px double #b4b8bf;
} 
a{
cursor:pointer;
}
a:hover + div { 
display: block; 
color: #4287f5; 
font-size: 20px; 
}

Ниже показан результат нашего кода:

Пример

<!DOCTYPE html>
<html>
  <title>Заголовок документа</title>
  <head>
    <style> 
      h2 { 
      color: #4287f5; 
      } 
      div { 
      display: none; 
      border: 5px double #b4b8bf;
      } 
      a{
      cursor:pointer;
      }
      a:hover + div { 
      display: block; 
      color: #4287f5; 
      font-size: 20px; 
      } 
    </style>
  </head>
  <body>
    <center>
      <h2>W3docs</h2>
      <b> 
      Наведите мышь на элемент внизу, чтобы увидеть div-элемент. 
      </b> 
      <br> 
      <br>
      <a href=”https://www.w3docs.com/”>W3docs</a> 
      <div> 
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
      </div>
    </center>
  </body>
</html>

Рассмотрим другой пример:

Пример

<!DOCTYPE html>
<html>
  <title>Заголовок документа</title>
  <head>
    <style> 
      main{
      text-align:center;
      }
      h2 { 
      color: green; 
      } 
      div { 
      display: none; 
      border: 5px double #b4b8bf;
      } 
      a{
      display:block;
      margin-top:15px;
      cursor:pointer;
      }
      a:hover + div { 
      display: block; 
      color: #4287f5; 
      font-size: 20px; 
      } 
    </style>
  </head>
  <body>
    <main>
      <h2>W3docs</h2>
      <strong> 
      Наведите мышь на элемент внизу, чтобы увидеть div-элемент. 
      </strong> 
      <a href=”https://www.w3docs.com/”>W3docs</a> 
      <div> 
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
      </div>
    </main>
  </body>
</html>

В этом примере мы использовали тег <main>, вместо элемента <center>. В спецификации HTML5 это новый элемент уровня блока. Тег используется, чтобы определить основной контент документа. Мы использовали свойство text-align со значением “center”. Вместо тега <b>, можно использовать тег <strong>.

Пример

<!DOCTYPE html>
<html>
  <title>Заголовок документа</title>
  <head>
    <style> 
      div{
      text-align:center;
      }
      h2 { 
      color: green; 
      } 
      .hide { 
      display: none; 
      border: 5px double #b4b8bf;
      } 
      a{
      display:block;
      margin-top:15px;
      cursor:pointer;
      text-decoration:none;      }
      a:hover + div { 
      display: block; 
      color: #4287f5; 
      font-size: 20px; 
      } 
    </style>
  </head>
  <body>
    <div>
      <h2>W3docs</h2>
      <strong> 
      Наведите мышь на элемент внизу, чтобы увидеть div-элемент. 
      </strong> 
      <a href=”https://www.w3docs.com/”>W3docs</a> 
      <div class="hide"> 
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
      </div>
    </div>
  </body>
</html>

В этом примере мы использовали тег <div> внутри другого <div> и добавили для него класс “hide”. Здесь получается одинаковый результат.

Рассмотрим другой пример:

Пример

<!DOCTYPE html>
<html>
  <title>Заголовок документа</title>
  <head>
    <style> 
      div{
      text-align:center;
      }
      h2 { 
      color: #4287f5; 
      } 
      .hide { 
      display: none; 
      border: 5px double #b4b8bf;
      } 
      a{
      display:block;
      margin-top:15px;
      cursor:pointer;
      text-decoration:none;      
      }
      a:hover + span { 
      display: block; 
      color: #4287f5; 
      font-size: 20px; 
      } 
    </style>
  </head>
  <body>
    <div>
      <h2>W3docs</h2>
      <strong> 
      Наведите мышь на элемент внизу, чтобы увидеть div-элемент.  
      </strong> 
      <a href=”https://www.w3docs.com/”>W3docs</a> 
      <span class="hide"> 
      Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
      </span>
    </div>
  </body>
</html>

В этом примере мы использовали тег a <span> вместе с классом “hide”. Это пустой контейнер. Тег <div> объединяет элементы уровня блока, а <span> объединяет строчные элементы.


Считаете ли это полезным?

Похожие статьи