Objectives and outcomes

In this we are going to learn about showing and hiding a div on hovering a button. Hover effect is implemented using onMouseOver() and onMouseOut() functions in JS. You can observe this effect on moving the mouse over the button in the example below.





HTML code:

<html>
<body>
<div>
<button onMouseOver="show()" onMouseOut="hide()"><a>Hover me!!</a></button>
</div>
<div id="1" style="display:none;">
<br/>
<p>This div appears on moving the mouse over the button</p>
</div>
</body>
</html>





Javascript:

<script>
function show()
{
	document.getElementById("1").style.display = "block";
}

function hide()
{
	document.getElementById("1").style.display = "none";
}
</script>


In the above script as soon as we move the mouse over the button, show function is called. show function in the script searches the document for element with id=1 and changes the style of that element from display:none to display:block because of which the div appears on the screen.
Now as soon as we remove the cursor from the button, hide function is called. Again the script searches the document for element with id=1 and changes its style from display:block to display:none beacuse of which the div hides from the screen.