在悬停时滚动文本div并返回到第一个元素 [英] Scroll text div on hover and return to first element
本文介绍了在悬停时滚动文本div并返回到第一个元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当我将鼠标悬停在其上而不是重复自身时,如何用另一个文本替换主页"按钮?
How to replace "home" button with another text when I hover by mouse on it instead of it repeating itself?
<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:
And changed 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);
});
这篇关于在悬停时滚动文本div并返回到第一个元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文