悬停滚动文本div并返回第一个元素

  • Z时代
  • 2024-01-10
  • 分类：问答

如何用鼠标悬停而不是重复自己，用另一个文本替换“home”按钮？悬停滚动文本div并返回第一个元素

<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/

回答：

检查我的变种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); 
});

回答：

你需要做的就是把你想显示悬停文字的锚怎么开始的，象这样

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

以上是 悬停滚动文本div并返回第一个元素 的全部内容， 来源链接： utcz.com/qa/260104.html

回到顶部