Show a `hidden` Div on Hover using JavaScript

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 in this article.

index.html

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

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

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 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 div
  // hiddenDiv.style.visibility = 'hidden';
});

We added a mouseover event listener to an element.

Every time the element is hovered, the handleMouseOver function is invoked.

Inside of the function, 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 has no effect on 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). It 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.

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>

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

Even though there is content after the hidden div on the page, the element below it does not 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.

Show a `hidden` Div on Hover using JavaScript

Show a hidden Div on Hover using JavaScript #

Borislav Hadzhiev