懸停滾動文本div並返回第一個元素

Question

如何用鼠標懸停而不是重複自己，用另一個文本替換「home」按鈕？

<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); 
    }); 

});