Appending divs on mouseenter
<p>Basically, I want to append a div to an <code>li</code> element on mouseenter, then append a separate div on mouseenter of another <code>li</code> element of the same parent <code>ul</code>.  So if an <code>li</code> is hovered, append <code>#div1</code>, then if another <code>li</code> is hovered, append <code>#div2</code>.</p>

<p>This is what I have so far   </p>

<pre><code>$('ul &gt; li').mouseenter(function (){
      $('#div1').appendTo(this);

      if (('ul &gt; li').mouseenter().not(this)){
         $('#div2')appendTo(this);
      }
});
</code></pre>

<p>This only appends <code>#div1</code> to the hovered <code>li</code>.  How do I append <code>#div2</code> if another <code>li</code> is hovered?  The <code>.not()</code> selector doesn't seem to be working.  Thanks in advance. </p>
