Прокрутите текстовый div при наведении и вернитесь к первому элементу

Question

Как заменить кнопку «домой» другим текстом, когда я наводю курсор мыши на нее, а не повторяюсь?

<ul class="topnav">
<li><a href="#">Home</a></li>
</ul>


jQuery(function($) {

    $('.topnav li').find('a[href]').parent().each(function(span, li){
        li = $(li); span = $('<span>' + li.find('a').html() + '<\/span>');
        li.hover(function(){
        span.stop().animate({marginTop: '-60'}, 250);
        }, function(){
        span.stop().animate({marginTop: '0'}, 250);
        }).prepend(span);
    });

});

Вот пример: http://jsfiddle.net/fxdigi/3YNHp/1/

Answer 1

Проверьте мой вариант http://jsfiddle.net/3YNHp/5/

Используется разметка:

<ul class="topnav">
    <li>
        <a href="#" data-hover-text="Mohe">Home</a>
    </li>
</ul>

И изменен JavaScript:

$('.topnav li').find('a[href]').parent().each(function() {
    var li   = $(this),
        a    = li.find('a'),
        span = $('<span>' + a.data('hover-text') + '<\/span>');

    li.hover(function() {
        a.stop().animate({marginTop: '-64'}, 250);
    },
    function() {
        a.stop().animate({marginTop: '0'}, 250);
    })
    .append(span);
});

Answer 2

То, что вам нужно сделать, это поместить текст, который вы хотите показать, при наведении курсора, чтобы начать с вот так

<ul class="topnav">
<li data-orig="Home"><a href="#">Go to</a></li>
</ul>

А затем в атрибуте данных поместите текст, который вы хотите показать изначально.

Затем слегка измените JavaScript, чтобы вытащить новые значения.

jQuery(function($) {

    $('.topnav li').find('a[href]').parent().each(function(span, li){
        li = $(li); span = $('<span>'+ li.attr('data-orig') +'<\/span>');
        li.hover(function(){
        span.stop().animate({marginTop: '-60'}, 250);
        }, function(){
        span.stop().animate({marginTop: '0'}, 250);
        }).prepend(span);
    });

});