Show a `hidden` Div on Hover using JavaScript

# Table of Contents

# Show a hidden Div on Hover using JavaScript

To show a hidden div element on hover:

Add a mouseover event listener to an element.
Each time the element is hovered, set the display property on the div to block.
If you used the visibility property to hide the div, set its visibility to visible.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>

    <style>
      #container {
        background-color: lime;
        width: 150px;
        height: 150px;
      }

      #hidden-div {
        display: none;
        background-color: salmon;
        color: white;
      }
    </style>
  </head>

  <body>
    <div id="container">
      Container content
      <div id="hidden-div">Hidden div content</div>
    </div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const el = document.getElementById('container');

const hiddenDiv = document.getElementById('hidden-div');

// ✅ Show hidden DIV on hover
el.addEventListener('mouseover', function handleMouseOver() {
  hiddenDiv.style.display = 'block';

  // 👇️ if you used visibility property to hide the div
  // hiddenDiv.style.visibility = 'visible';
});

// ✅ (optionally) Hide DIV on mouse out
el.addEventListener('mouseout', function handleMouseOut() {
  hiddenDiv.style.display = 'none';

  // 👇️ if you used visibility property to hide the div
  // hiddenDiv.style.visibility = 'hidden';
});

show hidden div on hover

The code for this article is available on GitHub

We added a mouseover event listener to an element.

Every time the user hovers over the element, the handleMouseOver function is invoked.

We used the display property to show the hidden div element.

However, you might need to use the visibility property if that's what you used to hide the div element initially.

When an element's display property is set to none, the element is removed from the DOM and does not affect the layout. The document is rendered as though the element does not exist.

On the other hand, when an element's visibility property is set to hidden, it still takes up space on the page, however, the element is invisible (not drawn).

The element still affects the layout on your page as normal.

We also added a mouseout event listener. Every time the user moves their cursor out of the element, the div element is hidden again.

You might not need this functionality depending on your use case.

If you want to avoid cumulative layout shift (CLS) where the content of the page shifts when an element is hidden or shown, you should use the visibility CSS property instead of display.

# Show a hidden Div on Hover using the visibility property

Here is an example that uses the visibility property.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      #container {
        background-color: lime;
        width: 150px;
        height: 150px;
      }

      #hidden-div {
        visibility: hidden;
        background-color: salmon;
        color: white;
      }
    </style>
  </head>

  <body>
    <div id="container">
      <div>Container content</div>
      <div id="hidden-div">Hidden div content</div>
      <div>More content</div>
    </div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const el = document.getElementById('container');

const hiddenDiv = document.getElementById('hidden-div');

// ✅ Show hidden DIV on hover
el.addEventListener('mouseover', function handleMouseOver() {
  hiddenDiv.style.visibility = 'visible';
});

// ✅ (optionally) Hide DIV on mouse out
el.addEventListener('mouseout', function handleMouseOut() {
  // 👇️ if you used visibility property to hide div
  hiddenDiv.style.visibility = 'hidden';
});

show hidden div on hover visibility property

The code for this article is available on GitHub

Even though there is content after the hidden div on the page, the element below it doesn't take its place because this time we used the visibility property to hide the element.

In other words, even though the element is not rendered, it still affects the layout of the page as normal.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Show a `hidden` Div on Hover using JavaScript

# Table of Contents