title: Replacing the entire div on hover and switch back on hover out
body: <p>I have a table and i want to change a div to another div on hover and on hover out i want to change to what was before.</p>
  
  <p>my table   </p>
  
  <pre><code>&lt;table id="table2"&gt;
  &lt;body&gt;
    &lt;tr&gt;
       &lt;td&gt;
          &lt;div id="com.zynga.wwf2.free" class="redips-drag orange" style="border-style: solid; cursor: move; background-image: url(https://lh3.googleusercontent.com/mm9kB_B7UTEMuG2t914nmu2pox-G5a64GlajDaUdf7M5LfKBeYpBbeouyRVgsBATLSA=w300); background-size: 100px 100px; background-repeat: no-repeat;  width: 100px;
             height: 100px;"&gt;&lt;/div&gt;
       &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/body&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>now i want to change the div on hover to this:   </p>
  
  <pre><code>&lt;div&gt;&lt;span&gt;clicks:123&lt;/span&gt;&lt;br&gt;&lt;span&gt;money:7890&lt;/span&gt;&lt;/div&gt;  
  </code></pre>
  
  <p>and on hoverout to return to before.</p>
  
  <p>i try this:   </p>
  
  <pre><code>        var temp_html;
      $("#table2 tr").find('div').hover(function(){
            var temp_html = $(this).clone().wrap('&lt;div&gt;').parent().html();
  
          $(this).replaceWith("&lt;div&gt;&lt;span&gt;clicks:123&lt;/span&gt;&lt;br&gt;&lt;span&gt;money:7890&lt;/span&gt;&lt;/div&gt;");
  
          }, function() {
         $(this).replaceWith(temp_html);
      });  
  </code></pre>
  
  <p>what am i doing wrong?</p>