jQuery hover over item and keep active
<p>I'm not really sure how to word this best, but basically I would like to hover over a list item which fades in another element right above it. When you hover back off the list item the elements should fadeout, but if you over hover the newly visible element, I would like it to remain visible.</p>

<p>I've put together a simple demonstration, <a href="http://jsfiddle.net/CLDyc/" rel="nofollow">http://jsfiddle.net/CLDyc/</a> - Basically, when you hover over item 1 and then move your mouse to "Item 1 Extra Info" I would like it also to stay visible.</p>

<pre><code>var location;

$("#dots li").hover(

    function () {
        location = $(this).attr("class");
        $("#extra-info ."+location).fadeIn("fast");
      },
    function () {
        $("#extra-info ."+location).stop(true, false).fadeOut("fast");
      }
);
</code></pre>
