Simple mouseover issue

Simple mouseover issue

Hi
I am bran new at JQuery and need some assistance with something probably very simple:

I would like to display an image and on moueover or mouseenter want to fade the pic completely to show a div with text in it.
On mouseleave would like to unfade the pic to now hide the text.

Here is what I have so far the mouseenter works but the last part not so much. Any help would be greatly appreciated. I ultimately am planning on having 4 different images and text divs on the same page

  2. <html>
  3. <head>
  4.   <style>
  5. p { width:120px; margin:0; padding:5px; }
  6. div { width:250px; height:250px; position:absolute; }
  7. div#one { top:0; left:0; background-image: url(../../../img/eye.png)}
  8. </style>
  9.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  10. </head>
  11. <body>
  12. <p>This is my sample text</p>

  14. <div id="one"></div>
  15. <script>
  16. $("div").mouseenter(function(){
  17. $(this).fadeTo("slow", 0.11);
  18. }).mouseleave(function(){
  19.           $("div").fadeIn(3000);
  20.   });
  21. </script>
  22. </body>
  23. </html>