title: Switch content of div when another div gets hovered on
body: <p>I'm having trouble getting something like this to work.  I've got a series of DIVS (1 through 8) and when you hover over one div, I want to literally change the contents of one of the other divs with the contents of #replace (which is current set to hidden)
    <code>&lt;div id="replace" style="visibility:hidden;"&gt;Bla Bla Bla&lt;/div&gt;</code>  ​</p>
  
  <p>Here is what I've got so far:</p>
  
  <pre><code>$('#1').on({
      mouseover: function(){
          $('#2').replaceWith(jQuery('#replace'));
      },
       mouseleave: function(){
          $('#2').replaceWith(jQuery('#2'));
      },
      click: function(){
          $('#2').replaceWith(jQuery('#replace'));
          $('#1').off('mouseleave mouseover');
      }
  });
  </code></pre>
  
  <p>Not really having an effect at all - so is my logic bad, how i'm doing it bad, etc...?</p>