title: How to create a floating div with jQuery
body: <p>When the mouse is over an element A of a certain class , another floating div B, which contains a link, should appear. B should disappear as soon as the mouse has left A and B.</p>
  
  <p>How can I do this with jQuery?
  <a href="http://jsfiddle.net/A2gFb/2/" rel="nofollow">jsFiddle</a></p>
  
  <pre><code>var container = $('#container');
  var area = $('.area'); // this is A
  var position = area.offset();
  
  var floating = $("&lt;div /&gt;", {
          css : { "position"  :   "absolute",
                  "top"       :   position.top - 30,
                  "left"      :   position.left + 20,
                  "border"    :   "1px solid #000",
                  "padding"   :   "5px",
                  "display"   :   "none",
                  "z-index"   :   "100",
                  "background-color"  :   "#F00"
          }
      })
          .text('Hello World'); // this is B
  
      container.css('position', 'relative');
      container.append(floating);
  
      function show() {
          floating.show();
      }
  
      function hide() {
          floating.hide();
      }
  
      area.on('mouseenter', show);
      area.on('mouseleave', hide);
      floating.on('mouseenter', function(event) {
          console.log("floating: mouseenter");
          area.off('mouseenter', show);
          area.off('mouseleave', hide);
      });
      floating.on('mouseleave', function(event) {
          console.log("floating: mouseleave");
          area.on('mouseenter', show);
          area.on('mouseleave', hide);
      });
  </code></pre>
  
  <p>My problem is that evertime the mouse enters B, B disappears already. I need to do this with jQuery, not only CSS.</p>