Skip to main content

How to Show a Hidden div on Hover in JavaScript

A common UI pattern is to reveal a hidden element when a user hovers their mouse over another element. This is often used for tooltips, dropdown menus, and interactive info boxes. While this can be done with JavaScript, the modern and most efficient way to achieve this is with pure CSS using the :hover pseudo-class.

This guide will demonstrate the recommended CSS-only solution and also cover the JavaScript approach using mouseover and mouseout events for cases that require more complex logic.

The Core Task: Hiding and Showing an Element​

The goal is to have one element (the "trigger") that, when hovered over, causes another element (the "target") to become visible.

Consider this HTML Structure: a common and accessible structure is to nest the hidden target element inside the trigger element.

<div id="trigger-container">
  Hover over me!
  
  <div id="hidden-box">
    This is the hidden content.
  </div>
</div>

For most hover-reveal interactions, you do not need JavaScript at all. A simple CSS rule is more performant, easier to maintain, and works even if JavaScript is disabled.

Logic:

  1. By default, the target element is hidden (e.g., with display: none).
  2. Use the :hover pseudo-class on the parent (trigger) element to create a rule that changes the display of the child (target) element when the parent is hovered.

Solution: CSS:

#hidden-box {
  display: none; /* The element is hidden by default */
  background-color: salmon;
  color: white;
  padding: 10px;
  margin-top: 5px;
}

/* This is the key: When the container is hovered... */
#trigger-container:hover #hidden-box {
  display: block; /* ...the hidden box becomes visible. */
}
note

This is the recommended best practice for all simple hover-reveal effects. It is declarative, efficient, and keeps your presentation logic in your stylesheet.

Solution 2 (For Complex Logic): The JavaScript mouseover/mouseout Method​

If your hover effect needs to trigger more complex logic—like fetching data, starting an animation, or interacting with other parts of the page—then you will need to use JavaScript event listeners.

Solution:

  1. Add a mouseover event listener to the trigger element to show the target.
  2. Add a mouseout event listener to the trigger element to hide the target again.

CSS:

#hidden-box {
  display: none; /* Still hidden by default */
  /* ... other styles */
}

JavaScript:

const triggerElement = document.getElementById('trigger-container');
const hiddenBox = document.getElementById('hidden-box');

// Show the hidden box when the mouse enters the trigger element
triggerElement.addEventListener('mouseover', () => {
  hiddenBox.style.display = 'block';
});

// Hide the box again when the mouse leaves the trigger element
triggerElement.addEventListener('mouseout', () => {
  hiddenBox.style.display = 'none';
});

A Note on display: none vs. visibility: hidden​

It's important to choose the right CSS property for hiding your element.

  • display: none;: This removes the element completely from the document layout. It takes up no space, and other elements will reflow to fill its spot. This can cause a "jump" in your page layout when the element is shown.
  • visibility: hidden;: This makes the element invisible, but it still occupies its space in the layout. Other elements will not move. This is a better choice if you want to avoid layout shifts when the element appears.

To use visibility, your CSS and JavaScript would look like this: CSS:

#hidden-box {
  visibility: hidden;
}
#trigger-container:hover #hidden-box {
  visibility: visible;
}

JavaScript:

// To show
hiddenBox.style.visibility = 'visible';
// To hide
hiddenBox.style.visibility = 'hidden';

Conclusion​

Showing a hidden element on hover is a fundamental UI pattern with a clear, preferred solution.

  • The CSS-only :hover pseudo-class is the recommended best practice for most use cases. It is more performant, more maintainable, and requires no JavaScript.
  • The JavaScript mouseover and mouseout events are the correct tool when the hover action needs to trigger more complex application logic.
  • Choose between display: none and visibility: hidden based on whether you want the element to affect the page layout when it is hidden.

Table of Contents