Scroll text div on hover and return to first element
<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>
