Как сделать вкладку скрытой, пока она не зависла

Question

У меня есть этот код, где при наведении курсора на тег ссылки .cat-link a.navlink ниже, каждая вкладка подкатегории .subcategories div отобразится.

Работает хорошо, но я хочу скрыть все вкладки. Когда я наводю курсор мыши на вкладку и хочу, чтобы она отображалась, а когда убираю мышь, я хочу, чтобы она скрывалась.

Первая вкладка отображается даже после того, как я обновил sh страницу.

Есть ли способ сделать все вкладки скрытыми или не отображать их, пока я не наведу на них курсор. Спасибо

const tabBtn = document.querySelectorAll('.category .cat-link .navlink');
const tab = document.querySelectorAll('.subcategories div');

        function tabShow(panelIndex) {
            tab.forEach(function(node) {
                node.style.display = "none";
            });
            tab[panelIndex].style.display = "block";
        }

        tabShow(0);

.subcategories {
    float: left;
    position: relative;
}

.subcategories div {
    width: 100px;
    height: 100px;
    position: absolute;
    background: red;
    display: none;
}

<div class="cat-link">
      <a href="#" onmouseover="tabShow(0)" class="navlink computer">
          <i class="fa fa-tv"></i>
          <span>Computer & Gaming</span>
      </a> 
      <a href="#" onmouseover="tabShow(1)" class="navlink phone">
          <i class="fa fa-mobile-alt"></i>
          <span>Mobiles & Tablets</span>
      </a> 
      <a href="#" onmouseover="tabShow(2)" class="navlink elect">
          <i class="fa fa-computer-speaker"></i>
          <span>Electronics</span>
      </a> 
</div>

<div class="subcategories">
     <div class="computer-sub">
         1
     </div>
     <div class="mobile-sub">
         2
      </div>
     <div class="electronics-sub">
         3
     </div>
</div>

Answer 1

Когда элемент имеет display: none;, у него нет ограничивающего прямоугольника, что означает, что вы не можете обнаружить зависание.

Попробуйте вместо этого использовать непрозрачность.

const tabBtn = document.querySelectorAll('.category .cat-link .navlink');
const tab = document.querySelectorAll('.subcategories div');

function tabShow(panelIndex) {
    tab.forEach(function(node) {
        node.style.opacity = "0";
    });
    tab[panelIndex].style.opacity  = "1";
}

tabShow(0);

Answer 2

Есть много способов сделать это, но чтобы сохранить простоту и то, как вы пытались это сделать, вы можете просто разделить вашу текущую функцию tabShow на 2 функции, такие как tabShow и tabHide , tabShow, чтобы включить только строку кода, которая будет отображать ваши вещи:

function tabShow(panelIndex) {
    tab[panelIndex].style.display = "block";
}

и tabHide, чтобы скрыть ваши вещи:

function tabHide(panelIndex) {
    tab.forEach(function(node) {
        node.style.display = "none";
    });
}

И не забудьте удалить tabShow(0); из вашего JS!

Затем добавьте onmouseout="tabHide()" с каждым onmouseover="tabShow(x)", который у вас есть.

Вот рабочий фрагмент:

const tabBtn = document.querySelectorAll('.category .cat-link .navlink');
const tab = document.querySelectorAll('.subcategories div');

        function tabShow(panelIndex) {
            tab[panelIndex].style.display = "block";
        }
        function tabHide(panelIndex) {
            tab.forEach(function(node) {
                node.style.display = "none";
            });
        }

.subcategories {
    float: left;
    position: relative;
}

.subcategories div {
    width: 100px;
    height: 100px;
    position: absolute;
    background: red;
    display: none;
}

<div class="cat-link">
      <a href="#" onmouseover="tabShow(0)" onmouseout="tabHide()" class="navlink computer">
          <i class="fa fa-tv"></i>
          <span>Computer & Gaming</span>
      </a> 
      <a href="#" onmouseover="tabShow(1)" onmouseout="tabHide()" class="navlink phone">
          <i class="fa fa-mobile-alt"></i>
          <span>Mobiles & Tablets</span>
      </a> 
      <a href="#" onmouseover="tabShow(2)" onmouseout="tabHide()" class="navlink elect">
          <i class="fa fa-computer-speaker"></i>
          <span>Electronics</span>
      </a> 
</div>

<div class="subcategories">
     <div class="computer-sub">
         1
     </div>
     <div class="mobile-sub">
         2
      </div>
     <div class="electronics-sub">
         3
     </div>
</div>

Answer 3

Вы можете создать два разных класса CSS, один из которых имеет visibility: hidden;, а другой - visibility: visible;. Вы можете добавить / удалить класс CSS из любого элемента HTML, используя (например) node.classList.add("hidden-node"); и node.classList.remove("show-node");.