title: apply parent's hover to jquery ui autocomplete child
body: <p>I'm in a similar situation a my other problem <a href="https://stackoverflow.com/questions/16195454/prevent-datepicker-from-triggering-parent-mouseleave/16196098?noredirect=1#16196098">prevent datepicker from triggering parent mouseleave</a>, but that solution doesn't seem to apply to jQuery UI autocomplete.</p>
  
  <p>How can the hover also apply to autocomplete children?  In other words, if one <code>mouseenter</code>s on an autocomplete suggestion, <code>#hoverMe</code> should stay open.  Also, suggestion/code on how to handle <code>select</code>ing a selection that's outside of <code>#hoverMe</code> while keeping <code>#hoverMe</code> shown until one <code>mouseenter</code>s back in would be great!</p>
  
  <p><a href="http://jsfiddle.net/Kzp87/" rel="nofollow noreferrer">http://jsfiddle.net/Kzp87/</a></p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div id="hoverAnchor"&gt;hover me&lt;/div&gt;
  &lt;div id="hoverMe" style="display:none"&gt;arbitrary text
      &lt;input type="text" id="autocompletor"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>js</strong></p>
  
  <pre><code>$(document).ready(function () {
      var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
      ];
  
      $("#autocompletor").autocomplete({
          source: availableTags
      });
      var _enter = false;
      $("#hoverAnchor").add($("#hoverMe")).mouseenter(function () {
          if (!_enter) {
              $("#hoverMe").stop(true, false).animate({
                  height: 'toggle',
                  opacity: 'toggle'
              }, 200);
          }
          _enter = true;
      }).mouseleave(function () {
          _enter = false;
          $("#hoverMe").stop(true, false).animate({
              height: 'toggle',
              opacity: 'toggle'
          }, 200);
      });
  });
  </code></pre>