您只需使用您在问题中链接到的代码,但您需要在 HTML 文档中选择正确的元素:
$('.content').children('.main').children().hover(function() {
$(this).stop(true, true).animate({ top : "-=0.45em" }, 150);
}, function() {
$(this).stop(true, true).animate({ top :"+=0.45em" }, 150);
});
当我将此代码发布到您网站上的开发者控制台时,当我将鼠标悬停在您的标签上时,您的标签就会开始动画。
注意.stop() 的使用,这在使用-= 和+= 修饰符时很有用。
更新
您需要将 JS 放在 HTML 文档的末尾(我个人最喜欢的)或将代码放在 document.ready 事件处理程序中。您的代码正在尝试绑定到尚不存在的元素,因此没有发生绑定。
$(function () {
$('.content').children('.main').children().hover(function() {
$(this).stop(true, true).animate({ top : "-=0.45em" }, 150);
}, function() {
$(this).stop(true, true).animate({ top :"+=0.45em" }, 150);
});
});
我喜欢将我的 JS 代码放在我的 HTML 文档的末尾,这样它们就不会阻碍页面的呈现。 CSS 位于 <head> 中,因此可以正确设置文档样式,并且 JS 放置在底部以便在设置 DOM 后运行。