title: Scroll text div on hover and return to first element
body: <p>How to replace "home" button with another text when I hover by mouse on it instead of it repeating itself?</p>
  
  <pre><code>&lt;ul class="topnav"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  
  jQuery(function($) {
  
      $('.topnav li').find('a[href]').parent().each(function(span, li){
          li = $(li); span = $('&lt;span&gt;' + li.find('a').html() + '&lt;\/span&gt;');
          li.hover(function(){
          span.stop().animate({marginTop: '-60'}, 250);
          }, function(){
          span.stop().animate({marginTop: '0'}, 250);
          }).prepend(span);
      });
  
  });
  </code></pre>
  
  <p>Here is the example: <a href="http://jsfiddle.net/fxdigi/3YNHp/1/" rel="nofollow">http://jsfiddle.net/fxdigi/3YNHp/1/</a></p>