When hovering over the link tag .cat-link a.navlink, each subcategory tab .subcategories div is displayed.
However, I would like to hide all tabs initially and have them appear only when hovered over with the mouse. Once the mouse is removed, I want the tabs to disappear.
Currently, the first tab is always visible even after refreshing the page.
Is there a way to keep all tabs hidden until they are hovered over? Thank you!
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>