JQuery : Show And Hide On Mouseover/Out

<html>
<head>
<title>show and hide on mouseover/out</title>

<style>

	body {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
	}
	h1 {
        font-size: 18px;
    }

    #initiallyHiddenBlock {
        display: none;
    }

    #mouseRegion {
        background-color: #000;
        height: 20px;
        width: 100px;
        color:#fff;
    }

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
    $('#mouseRegion').hover(
        function() { $('#initiallyHiddenBlock').show() },
        function() { $('#initiallyHiddenBlock').hide() }
    );
});

</script>
</head>
<body>

    <h1><b> and hide on mouseover/out</b></h1>
    <div id="mouseRegion">test and insert </div>
    <p id="initiallyHiddenBlock">Normally when we work with web applications we need</p>

</body>
</html>