HTML. появление блоков при наведении на блок и исчезновение при выходе из всех блоков

336
20 декабря 2021, 18:40

<head> 
  <meta charset="utf-8"> 
  <!-- <link rel="stylesheet" href="animate.css"> --> 
 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
 
</head> 
<body> 
<header class="sticky-top"> 
  <div class="d-flex justify-content-center" id = 'categories'> 
    <div class="order-3" id = 'link'> 
      Press 
    </div> 
    <div class="category  order-2 " style = 'opacity:0;'> 
      Hot 
    </div> 
    <div class="category   order-4" style = 'opacity:0;'> 
      Easy 
    </div> 
  </div> 
</header> 
<script type="text/javascript"> 
  var categories = document.getElementById('categories'); 
  var link = document.getElementById('link'); 
  var array_category = document.getElementsByClassName('category'); 
 
  link.onmouseover = hover; 
 
  categories.onmouseout = out; 
 
  function hover(event){ 
    for (var i = 0; i < array_category.length; i++){ 
      array_category[i].style.opacity = '1' 
    } 
  } 
  function out(event){ 
    for (var i = 0; i < array_category.length; i++){ 
      array_category[i].style.opacity = '0' 
    } 
  } 
</script> 
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> 
 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js"></script> 
</body>

Использую Bootstrap4. Хочу, чтобы когда я наводил на Press у меня появлялись Hot и Easy (что работает), но проблема в том, что , когда курсор выходит за Press , то у меня пропадают Hot и Easy, а я хочу, чтобы они пропадали, только тогда, мышка выйдет за границы всего header который занимает всю ширину

Answer 1

.order-3:after { 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    display: none; 
} 
#categories { 
    position: relative; 
} 
.order-3:hover:after { 
    display: block; 
}
<head> 
  <meta charset="utf-8"> 
  <!-- <link rel="stylesheet" href="animate.css"> --> 
 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
 
</head> 
<body> 
<header class="sticky-top"> 
  <div class="d-flex justify-content-center" id = 'categories'> 
    <div class="order-3" id = 'link'> 
      Press 
    </div> 
    <div class="category  order-2 " style = 'opacity:0;'> 
      Hot 
    </div> 
    <div class="category   order-4" style = 'opacity:0;'> 
      Easy 
    </div> 
  </div> 
</header> 
<script type="text/javascript"> 
  var categories = document.getElementById('categories'); 
  var link = document.getElementById('link'); 
  var array_category = document.getElementsByClassName('category'); 
 
  link.onmouseover = hover; 
 
  categories.onmouseout = out; 
 
  function hover(event){ 
    for (var i = 0; i < array_category.length; i++){ 
      array_category[i].style.opacity = '1' 
    } 
  } 
  function out(event){ 
    for (var i = 0; i < array_category.length; i++){ 
      array_category[i].style.opacity = '0' 
    } 
  } 
</script> 
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> 
 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js"></script> 
</body>

READ ALSO
Какие проблемы присутствуют в данном коде и как его улучшить?
Java

Какие проблемы присутствуют в данном коде и как его улучшить?

}

 136
Использование VBO в LibGdx
Java

Использование VBO в LibGdx

подскажите, как использовать VBO в libgdx? У меня проблема, что есть персонаж с костями, и их должно быть много, и проседает fps, и хотел бы ускорить...

 189
Неправильно работают методы
Java

Неправильно работают методы

Ребята, выручайте, методы не работают правильно почему-тоГеттеры и Сеттеры классов Автор и Сообщение работают исправно, они прошли тест

 179
Экран в Android
Java

Экран в Android

Экран при первом запуске называется onBoardingЕсть куча готовых решений на гитхабе

 71