javascript - 只操作鼠标悬停在 jquery 上的元素

Question

我的脚本中有一个函数，用于操纵 html 页面的导航。我的问题是我有多个 <nav>...</nav>代码块，当我使用下面的代码时，它会影响所有代码块。

$(function () {
    $('nav').hover(function () {
        $('nav').animate({ top: '-=100px' }, 1000, 'easeOutBounce', null);
    });
});

因此我假设合乎逻辑的做法是指定哪个导航 block 生成悬停事件，但是在使用 this 时在悬停事件发生时触发的函数内部没有任何反应。

$(function () {
    $('nav').hover(function () {
        this.animate({ top: '-=100px' }, 1000, 'easeOutBounce', null);
    });
});

我如何才能识别和操纵自己悬停的导航 block ，而不是立即影响所有导航 block 。

编辑

例如，如果我有这三个 nav block ，我希望它们仅在 nav 时由函数操作 block 正在悬停，我将如何区分它们。

<nav id="nav1"></nav>
<nav id="nav2"></nav>
<nav id="nav3"></nav>

Answer 1

使用$(this)代替this

$(function () {
    $('nav').hover(function () {
        $(this).animate({top: '-=100px' }, 1000, 'easeOutBounce', null);
    });
});