title: jQuery mouseover link to show hidden div
body: <p>I came across the mouseover event on extratorrent site like the following image.</p>
  
  <p><a href="http://img3.imageshack.us/img3/4516/usercommment999.jpg">alt text http://img3.imageshack.us/img3/4516/usercommment999.jpg</a></p>
  
  <p>When you hover the mouse over the username link, it shows a hidden div. Pretty neat and slick.</p>
  
  <p>I'm new to jQuery.Can anyone show me how to get start on the right track to do that? Thanks.</p>
  
  <p><strong>Update 1:</strong></p>
  
  <p>I wrote something like the following attempting to get the result. The problem is that when I mouse the mouse out the link the Div wont stay, it disappear immediately.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
      &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;Untitled Document&lt;/title&gt;
          &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"&gt;&lt;/script&gt;
         &lt;script type="text/javascript"&gt;
          $(document).ready(function()
          {
  
  
      $("#show_div").mouseover(function() { $("#hello").css('visibility','visible'); });
      $("#show_div").mouseout(function() { $("#hello").css('visibility','hidden'); });
  
  
          });
          &lt;/script&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
  
      &lt;a id="show_div" href="#"&gt;Link text&lt;/a&gt; 
      &lt;div id="hello" style="visibility:hidden;"&gt;
          &lt;ul&gt;
        &lt;li&gt;Coffee&lt;/li&gt;
        &lt;li&gt;Tea&lt;/li&gt;
        &lt;li&gt;Milk&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
  
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>What to do to make Div stay visible when mouse over the Div?</p>