title: jQuery show / hide panel and then hover over content within a panel
body: <p>I've got an item list where I want to show a related panel if the item list item is hovered over. I've got it working but the issue is that I cannot then hover over content within the panel once I've hovered over the linked list item for obvious reasons as I use a <code>mouseleave</code> function. </p>
  
  <p>I've been at this for a few days and cannot work out the logic of what needs to be done to leave the related panel open so I can hover over it and click a read more link within it. </p>
  
  <p>I tried adding a class on the hover state to the panel but that did not seem to work either.</p>
  
  <p>My HTML is:</p>
  
  <pre><code>&lt;div id="item-wrapper"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#" id="item-1"&gt;Item 1&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#" id="item-2"&gt;Item 2&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="panel-1" class="panel"&gt;
       &lt;h2&gt;This is panel 1!&lt;/h2&gt;
      &lt;a href="#"&gt;read more 1...&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div id="panel-2" class="panel"&gt;
       &lt;h2&gt;This is panel 2!&lt;/h2&gt;
      &lt;a href="#"&gt;read more 2...&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My basic jQuery is:</p>
  
  <pre><code>$('#item-1').mouseenter(function () {
      $('#panel-1.panel').toggle();
  });
  
  $('#item-1').mouseleave(function () {
      $('#panel-1.panel').toggle();
  });
  
  $('#item-2').mouseenter(function () {
      $('#panel-2.panel').toggle();
  });
  
  $('#item-2').mouseleave(function () {
      $('#panel-2.panel').toggle();
  });
  </code></pre>
  
  <p>... and then I have some CSS where the panels are set to <code>display: none</code> to begin with. Note, if neither list item links are hovered then the panels should go away if one had been open previous to that. </p>
  
  <p><a href="http://jsfiddle.net/highrockmedia/7YeYZ/" rel="nofollow"><strong>Fiddle demo here...</strong></a></p>