Tips for creating a hidden tab that only appears when hovered over

Question

Tips for creating a hidden tab that only appears when hovered over

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>

javascript jquery html css

Answer 1

Answer №1

When an item is hidden with display: none;, it does not have a visible bounding box, which means hovering detection is not possible.

Consider using opacity as an alternative solution.

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

function showTab(panelIndex) {
    tabs.forEach(function(element) {
        element.style.opacity = "0";
    });
    tabs[panelIndex].style.opacity = "1";
}

showTab(0);

Answer 2

When an item is hidden with display: none;, it does not have a visible bounding box, which means hovering detection is not possible.

Consider using opacity as an alternative solution.

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

function showTab(panelIndex) {
    tabs.forEach(function(element) {
        element.style.opacity = "0";
    });
    tabs[panelIndex].style.opacity = "1";
}

showTab(0);

Answer 3

Answer №2

To achieve the desired effect, consider creating two distinct CSS classes. One class should include the property visibility: hidden;, while the other should include visibility: visible;. By utilizing methods such as

node.classList.add("hidden-element");

and

node.classList.remove("visible-element");

, you can dynamically apply or remove these classes to any HTML element.

Answer 4

To achieve the desired effect, consider creating two distinct CSS classes. One class should include the property visibility: hidden;, while the other should include visibility: visible;. By utilizing methods such as

node.classList.add("hidden-element");

and

node.classList.remove("visible-element");

, you can dynamically apply or remove these classes to any HTML element.

Answer 5

Answer №3

If you're looking for a simple way to achieve this, consider breaking down your current tabShow function into two separate functions: tabShow for displaying content and tabHide for hiding it:

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

Define the tabHide function to hide the content:

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

Remember to remove tabShow(0); from your JS code. Instead, add onmouseout="tabHide()" alongside each existing onmouseover="tabShow(x)" event.

Here's an example snippet that demonstrates how to implement these changes:

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 6

If you're looking for a simple way to achieve this, consider breaking down your current tabShow function into two separate functions: tabShow for displaying content and tabHide for hiding it:

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

Define the tabHide function to hide the content:

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

Remember to remove tabShow(0); from your JS code. Instead, add onmouseout="tabHide()" alongside each existing onmouseover="tabShow(x)" event.

Here's an example snippet that demonstrates how to implement these changes:

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>

Tips for creating a hidden tab that only appears when hovered over

Answer №1

Answer №2

Answer №3

Similar questions

Receiving encoded characters in the response

Utilize the size of the array as a variable

Utilizing loops for data selection and presentation within a div using MySQL and PHP

Issues encountered while trying to access a child state using Ionic and UI-Router

CssLint detected an unfamiliar property: "fill"

Unveiling the magic: Dynamically displaying or concealing fields in Angular Reactive forms based on conditions

Alignment Troubles with Icons

Events are not being emitted by Socket.io

The useEffect function is not being executed

Navigating to the next page on a dynamic component in Angular 5 by

convert a string to JSON format using Node.js Express

Steps for transforming a JSON into a Class to generate objects

Working with conditional rendering in React Native allows us to easily change text based on different conditions. By utilizing

Implementing interactive elements such as buttons and controls on an HTML5 canvas

Steps to clear the form in vue after the ajax request has been successfully submitted

Having trouble with PHP SQLite3 functioning on the web server, but it works fine

Uncovering the Solution: Digging into a Nested ng-repeat to Access an Array in AngularJS

What is the best way to display the tabcontent when clicking on a menu tab in this code, as neither method seems to work?

What is the best way to track and display the window.scrollY value in the console using Next.js

Find the item that has a specific value in its sub-property