Javascript 如何将选项卡隐藏到悬停状态

我有一个代码，当鼠标悬停在下面的链接标签.cat link a.navlink上时，每个子类别选项卡.subcategories div都会显示出来

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

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

是否有一种方法可以使所有选项卡隐藏或显示，直到我将鼠标悬停在其上。谢谢

const tabBtn=document.queryselectoral（'.category.cat link.navlink'）；
const tab=document.queryselectoral（'.subcategories div'）；
功能选项卡显示（面板索引）{
tab.forEach（函数（节点）{
node.style.display=“无”；
});
选项卡[panelIndex].style.display=“block”；
}
tabShow（0）
。子类别{
浮动：左；
位置：相对位置；
}
.分类组{
宽度：100px；
高度：100px；
位置：绝对位置；
背景：红色；
显示：无；
}

1.
2.
3.
当元素具有
显示时：无它没有边界框，这意味着您无法检测悬停

尝试改用不透明度

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

您可以创建两个不同的CSS类，一个具有
可见性：hidden和另一个具有
可见性：可见。您可以使用（例如，
node.classList.add（“隐藏节点”）从任何HTML元素中添加/删除CSS类和
节点.classList.remove（“显示节点”）
有很多方法可以实现，但是为了保持简单，并且在您尝试的方式内，您可以简单地将当前的
tabShow
函数分为两个函数，例如
tabShow
和
tabHide
，让
tabShow
只包含实际显示您的内容的代码行：

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

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

和
tabHide
隐藏您的资料：

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

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

不要忘记删除
tabShow（0）从你的JS

然后用您拥有的每个
onmouseover=“tabShow（x）”
添加
onmouseout=“tabHide（）”

下面是一个工作片段：


const tabBtn=document.queryselectoral（'.category.cat link.navlink'）；
const tab=document.queryselectoral（'.subcategories div'）；
功能选项卡显示（面板索引）{
选项卡[panelIndex].style.display=“block”；
}
函数tabHide（panelIndex）{
tab.forEach（函数（节点）{
node.style.display=“无”；
});
}
。子类别{
浮动：左；
位置：相对位置；
}
.分类组{
宽度：100px；
高度：100px；
位置：绝对位置；
背景：红色；
显示：无；
}

1.
2.
3.