title: replaceWith() doesn't work inside .hover()
body: <p>I have a jQuery script that replaces a <code>.class ul li</code> on mouse over and reverts back to the default on mouse out. My problem is that when the mouse is out of the <code>li</code> the second function attribute doesn't work, doesn't return the original <code>li</code> and the replaced <code>li</code> takes its place. </p>
  
  <p>Script:</p>
  
  <pre><code>$('.header-nav li:nth-child(2)').hover(
      function() {
        $( this ).replaceWith('&lt;li&gt;&lt;div class="new-messages-f"&gt;&lt;/div&gt;&lt;a href=""&gt;Account&lt;/a&gt;&lt;/li&gt;'); // Replaced
      },function() {
        $( this ).replaceWith('&lt;li&gt;&lt;div class="new-messages-f"&gt;89&lt;/div&gt;&lt;a href=""&gt;Ac&lt;/a&gt;&lt;/li&gt;'); // Original
      });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class="header-nav"&gt;
    &lt;li&gt;&lt;a href=""&gt;Logo Here&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div class="new-messages-f"&gt;89&lt;/div&gt;&lt;a href=""&gt;Ac&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>