Show a `hidden` Element on Hover using JavaScript

avatar

Borislav Hadzhiev

Last updated: Jan 6, 2022

banner

Photo from Unsplash

Show a hidden Element on Hover using JavaScript #

To show a hidden element on hover, add a mouseover event listener to the element. Every time the user hovers over the element, set the display property on the hidden element to block.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> #box { background-color: palegreen; width: 150px; height: 150px; } #hidden { display: none; background-color: violet; color: white; } </style> </head> <body> <div id="box"> <div>Apple, Orange, Pear</div> <div id="hidden">---- Hidden element ----</div> <div>Banana, Melon, Avocado</div> </div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const el = document.getElementById('box'); const hiddenEl = document.getElementById('hidden'); // ✅ Show hidden DIV on hover el.addEventListener('mouseover', function handleMouseOver() { hiddenEl.style.display = 'block'; // 👇️ if you used visibility property to hide div // hiddenEl.style.visibility = 'visible'; }); // ✅ (optionally) Hide element on mouse out el.addEventListener('mouseout', function handleMouseOut() { hiddenEl.style.display = 'none'; // 👇️ if you used visibility property to hide div // hiddenEl.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 element, however you might need to use the visibility property if that's what you used to hide the 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 with id of box, the element we showed 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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> #box { background-color: palegreen; width: 150px; height: 150px; } #hidden { visibility: hidden; background-color: violet; color: white; } </style> </head> <body> <div id="box"> <div>Apple, Orange, Pear</div> <div id="hidden">---- Hidden element ----</div> <div>Banana, Melon, Avocado</div> </div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const el = document.getElementById('box'); const hiddenEl = document.getElementById('hidden'); // ✅ Show hidden DIV on hover el.addEventListener('mouseover', function handleMouseOver() { // hiddenEl.style.display = 'block'; // 👇️ if you used visibility property to hide div hiddenEl.style.visibility = 'visible'; }); // ✅ (optionally) Hide element on mouse out el.addEventListener('mouseout', function handleMouseOut() { // hiddenEl.style.display = 'none'; // 👇️ if you used visibility property to hide div hiddenEl.style.visibility = 'hidden'; });

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

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.