Javascript display style none: HTML DOM Style display Property

Leave a Comment / Разное / By /

Отображать скрытый элемент при наведении курсора на гиперссылку или тег.

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

Давайте посмотрим на пример и обсудим каждую часть кода.

 

  <голова>
    Название документа
  
  <тело>
    <центр>
       
W3docs
 
      
        Наведите курсор на элемент, показанный ниже, чтобы увидеть элемент div.
      
      

      

      W3docs
      <дел>
        Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.

Попробуй сам »

 h3 {
  цвет: #4287f5;
}

дел {
  дисплей: нет;
  граница: 5px двойной #b4b8bf;
}

а {
  курсор: указатель;
}

а: наведите + div {
  дисплей: блок;
  цвет: #4287f5;
  размер шрифта: 20px;
}

Вот результат нашего кода.

Пример отображения скрытого элемента при наведении с тегом

:
 

  <голова>
    Название документа
    <стиль>
      h3 {
        цвет: #4287f5;
      }
      дел {
        дисплей: нет;
        граница: 5px двойной #b4b8bf;
      }
      а {
        курсор: указатель;
      }
      а: наведение + div {
        дисплей: блок;
        цвет: #4287f5;
        размер шрифта: 20px;
      }
    
  
  <тело>
    <центр>
       
W3docs
 
      
      Наведите курсор на элемент, показанный ниже, чтобы увидеть элемент div. 
      
      

      

      W3docs
      <дел>
        Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.

Попробуй сам »

Результат

Наведите курсор на элемент, показанный ниже, чтобы увидеть элемент div.

W3docs

Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.

Пример отображения скрытого элемента при наведении с тегом

:
 

  <голова>
    Название документа
    <стиль>
      основной {
        выравнивание текста: по центру;
      }
      h3 {
        цвет: зеленый;
      }
      дел {
        дисплей: нет;
        граница: 5px двойной #b4b8bf;
      }
      а {
        дисплей: блок;
        поле сверху: 15px;
        курсор: указатель;
      }
      а: наведение + div {
        дисплей: блок;
        цвет: #4287f5;
        размер шрифта: 20px;
      }
    
  
  <тело>
    <основной>
       
W3docs
 
      <сильный>
        Наведите курсор на элемент, показанный ниже, чтобы увидеть элемент div. 
      
      W3docs
      <дел>
        Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.

Попробуй сам »

В этом примере мы использовали тег

вместо элемента
. Это новый элемент блочного уровня в спецификации HTML5. Тег используется для определения основного содержания документа. Мы использовали свойство text-align со значением «center». Вы можете использовать тег вместо тега .

Пример отображения скрытого элемента при наведении с помощью div: 

 

  <голова>
    Название документа
    <стиль>
      дел {
        выравнивание текста: по центру;
      }
      h3 {
        цвет: зеленый;
      }
      .скрывать {
        дисплей: нет;
        граница: 5px двойной #b4b8bf;
      }
      а {
        дисплей: блок;
        поле сверху: 15px;
        курсор: указатель;
        текстовое оформление: нет;
      }
      а: наведение + div {
        дисплей: блок;
        цвет: #4287f5;
        размер шрифта: 20px;
      }
    
  
  <тело>
    <дел>
       
W3docs
 
      <сильный>
        Наведите курсор на элемент, показанный ниже, чтобы увидеть элемент div. 
      
      W3docs
      <дел>
        Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.