0

Вопрос: Как сделать так, что-бы блок с классом menu 2 секунды появлялся при наведении на блок с классом naviconi. Сейчас он просто появляется при наведении на блок с классом naviconi.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Example | Asper</title>
  <link rel="shortcut icon" src="favicon.ico">
  <style>
    .header {
      position: relative;
      margin-left: -8px;
      margin-right: -8px;
      margin-top: -8px;
      background-color: black;
    }
    
    .menu {
      position: absolute;
      display: none;
      visibility: hidden;
      background-color: black;
      color: white;
      margin-left: -5px;
      margin-top: -5px;
    }
    
    .text-on-menu {
      font-size: 20px;
      color: white;
      margin: 5px;
    }
    
    .link-on-menu {
      font-size: 20px;
      color: white;
      margin: 5px;
      transition: 0.5s;
    }
    
    .in-header {
      margin: 5px;
    }
    
    .navicon {
      transition: 1s;
      width: 50px;
    }
    
    .link-on-menu:hover {
      background-color: gray;
      border-radius: 3px;
    }
    
    .naviconi:hover .menu {
      display: block;
      visibility: visible;
    }
    
    .navicon:hover {
      transform: scale(1.2);
    }
    
    a {
      text-decoration: none;
    }
  </style>
</head>

<body>
  <header class="header">
    <div class="in-header">
      <div style="display: inline;" class="naviconi"><img class="navicon" src="navicon.png">
        <div class="menu">
          <a href="index.html">
            <div class="link-on-menu">Главная</div>
          </a>
          <a href="html.html">
            <div class="link-on-menu">Справочник по HTML и CSS</div>
          </a>
          <a href="about.html">
            <div class="link-on-menu">Обо мне</div>
          </a>
          <div style="margin: 3px;"><img src="icon.png"></div>
        </div>
      </div>
      <div style="position: relative; display: inline; top: 13px; float: right;"><img src="icon.png"></div>
    </div>
  </header>
  <div style="margin-left: 5%;
		margin-right: 5%;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div style="background-color: gray;
		margin-left: 5%;
		margin-right: 5%;
		margin-top: 20px;
		border-radius: 3px;">
    <div style="padding-top: 3px;
		padding-bottom: 3px;" align="center">РЕКЛАМА</div>
  </div>
  <footer style="position: relative; margin-left: -8px; margin-right: -8px; background-color: black; margin-top: 20px; margin-bottom: -10px;">
    <div style="margin-left: 15%; margin-right: 15%; color: white; padding-top: 15px; padding-bottom: 15px;">
      <div style="display: inline;">E-mail: lorem@gmail.com<br>Номер: lorem<br>Lorem.<br><img src="icon.png"></div>
    </div>
  </footer>
</body>

</html>

1 ответ 1

1

Можно с помощью opacity:

.menu {
  position: absolute;
  display: block;
  background-color: black;
  color: white;
  margin-left: -5px;
  margin-top: -5px;
  opacity: 0;
 }
    
.naviconi:hover .menu {
  transition: opacity 2s ease;
  opacity: 1;
  }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.