title: jQuery toggle div visibility on hover
body: <p>Ok, so I have a bit of a variation on the old tooltip function. I'd like to achieve something similar, however make it so the mouse can track down onto the tooltip div and click links in the content it contains. Possibly not the best description, so let me show you what I mean. Take a look at <a href="http://www.hsbc.co.uk" rel="nofollow">http://www.hsbc.co.uk</a> - in particular the grey gradiented bar up the top. If you mouseover the 'everyday banking' section, you can then track down onto the dark grey box which appears below. How would I go about achieving this? This is my code so far:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;
      &lt;a href="#" id="hover"&gt;
        &lt;h2&gt;Garage Search&lt;/h2&gt;
        &lt;span&gt;Find yourself a garage&lt;/span&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="content"&gt;
    Content of popup div goes here
  &lt;/div&gt;
  
  $(document).ready(function() {
    $("#hover").hover(function() {
      $("#content").show();        
    }, function() {
      $("#content").hide();
    });        
  });
  </code></pre>
  
  <p>Obviously it works fine as a tooltip-type script in its current state, but won't allow me to mouse down onto the popup as that triggers the onmouseout event.</p>