Manipulieren Sie nur das Element, das die Maus über jquery bewegt

Question

Ich habe eine Funktion in meinem Skript, die die Navigation einer HTML-Seite manipulieren soll. Mein Problem ist, ich habe mehrere <nav>...</nav> Blöcke von Code und wenn ich den Code unten verwende, betrifft sie alle von ihnen.

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

Deshalb nahm ich die logische Sache festlegen zu tun wäre, das nav-Block das Hover-Ereignis wurde zu erzeugen, aber wenn this Verwendung innerhalb der Funktion, wenn ein Hover-Ereignis geschah im Ort nichts war gefeuert.

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

Wie bin ich in der Lage, die nav Block zu identifizieren und zu manipulieren, die auf ihrer eigenen schwebte über wird und nicht alle nav Blöcke auf einmal beeinflussen.

bearbeiten

Zum Beispiel, wenn ich diese drei nav Blöcke haben waren, und ich möchte, dass sie nur durch die Funktion manipuliert werden, wenn der nav Block über schwebte wird, wie würde ich zwischen ihnen zu unterscheiden.

Answer 1

Verwenden $(this) statt this

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

Answer 2

$ ('nav') gibt Ihnen eine Sammlung aller Navigationselemente auf der Seite. Setzen Sie ein ID-Attribut auf das Objekt, das Sie targetieren möchten, und verwenden Sie dieses.

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

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

Answer 3

Sie brauchen nicht einmal für sie JQuery zu verwenden. Auch das ist nicht die Art, Nav zu benutzen.

Nav ist ein semantisches HTML5-Tag. Es ist nichts falsch daran, es so zu benutzen, aber in Zukunft wird der Browser diese Tags richtig benutzen und das könnte einige Probleme verursachen. Denken Sie an ein Nav, wie Sie dem Browser sagen "Hey, hier ist meine Navigation"

Verwenden Sie Nav wie folgt und schreiben Sie diesen einfachen CSS-Code, und es wird funktionieren.

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

Hoffnung das Ihr Problem sehr viel