Display A Hidden div Element On Mouseover In JavaScript

To display a hidden div element on mouseover in JavaScript, set the style.display property of the div to ‘block’. If style.visibility was used instead of style.display, you can set the style.visibility property of the div to ‘visible’ to show the div. When the mouse is not over the element, the div will be hidden.

display a hidden div on mouseover in JavaScript

Display A Hidden Div On MouseOver Using style.display Property

The following example shows how to use JavaScript to show a hidden div on mouseover using style.display property:

<html>

<head>

</head>

<body>

<div id="myDiv" style="display:none;">

This is my DIV element.

</div>

<a href="#" onmouseover="showDiv()" onmouseout="hideDiv()">Show div</a>

<script type="text/javascript">

function showDiv() {

document.getElementById("myDiv").style.display = "block";

}

function hideDiv() {

document.getElementById("myDiv").style.display = "none";

}

</script>

</body>

</html>

In the above example, the div element is initially hidden using style.display property set to ‘none’. When the user hovers over the link, the onmouseover event calls the showDiv() function which changes the style.display property of the div to ‘block’ and makes it visible.

Similarly, when the user moves his mouse out of the link, the onmouseout event calls the hideDiv() function which changes the style.display property of the div back to ‘none’ and hides the div.

Display A Hidden Div On MouseOver Using style.visibility Property

The following example shows how to use JavaScript to show a hidden div on mouseover using style.visibility property:

<html>

<head>

</head>

<body>

<div id="myDiv" style="visibility:hidden;">

This is my DIV element.

</div>

<a href="#" onmouseover="showDiv()" onmouseout="hideDiv()">Show div</a>

<script type="text/javascript">

function showDiv() {

document.getElementById("myDiv").style.visibility = "visible";

}

function hideDiv() {

document.getElementById("myDiv").style.visibility = "hidden";

}

</script>

</body>

</html>

In the above example, the div element is initially hidden using style.visibility property set to ‘hidden’. When the user hovers over the link, the onmouseover event calls the showDiv() function which changes the style.visibility property of the div to ‘visible’ and makes it visible.

Similarly, when the user moves his mouse out of the link, the onmouseout event calls the hideDiv() function which changes the style.visibility property of the div back to ‘hidden’ and hides the div.

The style.visibility property is used to make the element visible or invisible.

Difference Between style.display And style.visibility Properties

The main difference between the style.display and style.visibility properties is that the display property shows or hides an element, while the visibility property makes an element visible or invisible.

If the style.display property is set to ‘none’, the div will be hidden and take up no space. If the style.visibility property is set to ‘hidden’, the div will be hidden but still take up space.

Another difference is that when an element is hidden using the style.display property, it cannot be made visible again using the style.visibility property. This is because the element has been removed from the flow of the document. An element that is hidden using the style.visibility property can be made visible again using the style.visibility property.

Conclusion – Display A Hidden div Element On Mouseover In JavaScript

In this post, you learned how to show a hidden div on mouseover in JavaScript. You also learned the difference between the style.display and style.visibility properties. Thanks for reading!

Leave a Reply