Hiding Div tag on mouseleave

Hiding Div tag on mouseleave

Hi all,

I am trying to display content when mouseenter the div tag with id="test" when mouseleave i want to hide the contents.It was working fine only once. I want it to repeat that when ever mouseenter or mouseleave.

Could any one help me please.....

Test1.txt contains - just text


  1. <html>
  2. <head>
  3. <style>
  4. div #load{
  5. float :right;
  6. border: 1px solid gray;
  7. }
  8. </style>
  9. <script type="text/javascript" src="jquery-1.4.2.js"></script>
  10. <script type="text/javascript">
  11. $(document).ready(function(){
  12.  
  13.   $("#test").mouseenter(function(){
  14.   $('#load').load('test1.txt');
  15.   });
  16.    
  17.   $("#test").mouseleave(function(){
  18.    $('#load').hide()
  19.   });
  20. });
  21. </script>
  22. </head>
  23. <body>
  24. <div id="test">
  25. <h2>Click to let AJAX change this text</h2><div id="load"/>
  26. </div>
  27. </body>
  28. </html>