Ich versuche herauszufinden, wie mit JQuery einige Tools angezeigt werden, wenn der Benutzer den Mauszeiger über einen Inhaltsblock bewegt. Zum Beispiel werden die Blöcke wie folgt mit den anfangs verborgenen Werkzeugen angezeigt:
%Vor%Ich brauche es, um die Werkzeuge für Block_1 zu zeigen, wenn der Benutzer über alles in Block_1 schwebt.
Ich sehe, dass Sie Platzhalter verwenden können, um etwas zu tun:
%Vor%Ich kann einfach nicht herausfinden, wie man genau die div.tools für diesen Block umschalten kann ...
BEARBEITEN: Wenn Sie nur einfache Stiländerungen vornehmen, sollten Sie CSS verwenden, um dies zu erreichen. Nicht Javascript.
Dieses CSS wird nicht für IE6 funktionieren, aber es wird für so ziemlich alle anderen modernen Browser funktionieren.
Geben Sie der übergeordneten block_ -Elemente eine Klasse wie block , entfernen Sie die Inline-Stile von tools , dann tun Sie dies:
Sie könnten dies tun:
%Vor% Obwohl ich denke, ich würde den block_ -Elementen eine gemeinsame Klasse hinzufügen und nach dieser Klasse auswählen:
HTML
%Vor% Innerhalb von Ereignishandlern bezieht sich das Schlüsselwort this auf das Element, das das Ereignis empfangen hat. In diesem Fall das Element mit der block_n ID.
Dann verwenden Sie die Methode .children() , um untergeordnete Elemente mit der Klasse tools auszuwählen.
Mit der Methode .toggle() können Elemente ein- und ausgeblendet werden. Ich habe es ein Argument gegeben, das das Ergebnis der Prüfung der Art des Ereignisses ist, das stattgefunden hat. Wenn das Ereignis 'mouseenter' war, wird .tools angezeigt, andernfalls wird es ausgeblendet.
Das äußere $(function() {...}); ist eine Abkürzung für das Umschließen Ihres Codes in jQuerys .ready() Methode , die sicherstellt, dass Ihre Code wird nicht ausgeführt, bis das DOM bereit ist.
Sie können die Methode .hover() zwei Funktionen zuweisen, wenn Sie dies bevorzugen. Dann würde ich die .show() und .hide() Methoden anstelle von .toggle() .
Tags und Links jquery