javascript - 如何使选项卡隐藏直至悬停

Question

我有这段代码，当鼠标悬停在下面的链接标签 .cat-link a.navlink 上时，每个子类别选项卡 .subcategories div 将显示。

效果很好，但我想要的是隐藏所有选项卡。当我用鼠标悬停在选项卡上时，我希望它显示，当我移开鼠标时，我希望它隐藏。

即使刷新页面后，第一个选项卡也会显示。

有没有办法让所有选项卡隐藏或不显示，直到我将鼠标悬停在它上面。谢谢

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);