mouseover and mouseout function in jQuery

mouseover and mouseout function in jQuery

html file:

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="mouseover_mouseout.js"></script>

<style type="text/css">

.box

{

background:green;

width:250px;

height:100px;

display:none;

}

</style>

</head>

<body>

<input type="button" value="please put mouse over me.." id="show" /></br>

<div class="box"></div>

</body>

</html>

_____________________________________________________________________________

jQuery(.js) file:

$(document).ready(function(){

$('#show').mouseover(function(){

$('#show').val('the mouse is put is out...');

$('.box').show(1000);

});

$('#show').mouseout(function(){

$('#show').val('please put mouse over me..');

$('.box').hide(1000);

});

});