title: Rearrange Text/Letters On Mouseover
body: <p>I'd like for some text on my page to have the letters rearranged when a user hovers over it.  For example, mouseover "WORK," and it becomes "OWKR."  I suspect js is needed, but I'm still pretty new to js.  Below is my html:</p>
  
  <pre><code>&lt;div class="header"&gt;
  &lt;div id="access" role="navigation"&gt;
  &lt;ul id="nav"&gt;
      &lt;li id="work"&gt;&lt;a href="work.html" title="Portfolio"&gt;WORK&lt;/a&gt;&lt;/li&gt;
      &lt;li id="studio"&gt;&lt;a href="studio.html" title="About Us"&gt;STUDIO&lt;/a&gt;&lt;/li&gt;
      &lt;li id="contact"&gt;&lt;a href="mailto:someone"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
      &lt;li id="news"&gt;&lt;a href="news.html" title="Goings Ons"&gt;NEWS&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I found a post that helped at <a href="https://stackoverflow.com/questions/5992623/combining-hover-and-replacewith">Combining .hover() and .replaceWith()</a> and expanded that code for my list.  However, I have a feeling my js is not as clean as it could be and the other issue I'm having is that on mouseover, the text is no longer a link.  Here's my js:</p>
  
  <pre><code>$(document).ready(function() {   
     $("#work").hover(
        function () {
          $('#work').text('KROW');
        },
        function () {
          $('#work').text('WORK');
        }
      );
      $("#studio").hover(
        function () {
          $('#studio').text('DUTIOS');
        },
        function () {
          $('#studio').text('STUDIO');
        }
      );
      $("#contact").hover(
        function () {
          $('#contact').text('ANOTTCC');
        },
        function () {
          $('#contact').text('CONTACT');
        }
      );
      $("#news").hover(
        function () {
          $('#news').text('ENSW');
        },
        function () {
          $('#news').text('NEWS');
        }
      );
  });
  </code></pre>
  
  <p>I know it's probably not great, but this was the only way I could get it to rearrange like I wanted.  </p>
  
  <p><a href="http://jsfiddle.net/01x30fc4/5/" rel="nofollow noreferrer">Here's the jsfiddle</a></p>
  
  <p>Thanks for any help!</p>