仅操纵鼠标悬停在jquery

Question

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

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

因此我假设逻辑上要做的是指定哪个导航块正在生成悬停事件，但是当在悬停事件到位时触发的函数内部使用this时没有发生任何事情。

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

我如何能够识别和操纵自身悬停的导航块，而不会立即影响所有导航块。

修改

例如，如果我要拥有这三个nav块，并且我希望它们仅在nav块被覆盖时被函数操纵，我将如何区分它们。 / p>

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

Answer 2

你甚至不需要使用JQuery。这也不是使用导航的方式。

Nav是一个语义HTML5标记。现在使用它并没有什么不妥，但是将来浏览器会开始正确使用这个标签，这可能会导致一些问题。想想导航，就像你告诉浏览器一样＃嘿嘿，这是我的导航＆＃34;

像这样使用nav并编写这个简单的CSS代码，它会起作用。

HTML

<nav>
<ul>
   <li>Element 1</li>
   <li>Element 2</li>
   <li>Element 3</li>
</ul>
</nav>

CSS

li{ /* Write your non active element styling here */}

li:hover{ /* Write your hovered element styling here */}

希望这能解决您的问题

Answer 3

$（'nav'）将为您提供页面上所有导航元素的集合。将id属性放在要定位的属性上并使用它。

<nav id="targetNav"></nav>

$('#targetNav').hover(...)