在hover时滚动文本div并返回第一个元素

当我将鼠标hover在它上面而不是重复时，如何用另一个文本替换“home”按钮？

 
Home
 
 jQuery(function($) { $('.topnav li').find('a[href]').parent().each(function(span, li){ li = $(li); span = $('' + li.find('a').html() + ''); 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/

它使用标记：

 
 
 Home 
  

并改变了javascript：

 $('.topnav li').find('a[href]').parent().each(function() { var li = $(this), a = li.find('a'), 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

您需要做的是将要显示的文本hover在锚点中，以便像这样开始

 
 
Go to
  

然后在数据属性中放置您想要显示的文本。

然后稍微修改javascript以提取新值。

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