title: jQuery, issue with mouseover
body: <p>I have a span .test, when the mouse is over it, it slideToggle a div .frame.
  As soon as the mouse leaves .frame, .frame slideToggle again.
  It works perfectly but inside .frame I have some others div .qwerty, so when the mouse is over .qwerty, .frame slideToggle instead of staying display, but I don't get why because the divs .qwerty are inside .frame.</p>
  
  <p>My code is:</p>
  
  <pre><code>$(document).on('mouseover', '.test', function() {
      var el = $(this);
      var elWidth = el.width();
      $('body').append('&lt;div class="frame"&gt;&lt;/div&gt;');
      var frame = $('.frame:last');
      var posTop = el.offset().top;
      var posLeft = el.offset().left;
      el.hide();
      frame.hide().css({
          'left': posLeft,
          'top': posTop,
          'width':elWidth
      });
      frame.html('&lt;div class="qwerty"&gt;qwerty&lt;/div&gt;&lt;div class="qwerty"&gt;qwerty&lt;/div&gt;&lt;div class="qwerty"&gt;qwerty&lt;/div&gt;').slideToggle(150);
  }).on('mouseout', '.frame', function() {
          var frame = $('.frame:last');
      frame.slideToggle(150, function() {
          frame.remove();
          $('.test').show();
      });
  });
  </code></pre>
  
  <p>here a jsFiddle: <a href="http://jsfiddle.net/malamine_kebe/dgJme/" rel="nofollow">http://jsfiddle.net/malamine_kebe/dgJme/</a></p>
  
  <p>for exemple if I fill out .frame by </p>
  
  <pre><code>qwerty&lt;br&gt;qwerty&lt;br&gt;qwerty
  </code></pre>
  
  <p>it works perfectly</p>