Ich versuche, einen einfachen mouseover-Effekt mit einer Kombination aus mouseover, mouseout, addClass und removeClass zu erstellen. Grundsätzlich, wenn der Benutzer über ein Element mausiert, möchte ich eine andere Grenze (1px gestrichelt grau) anwenden. Der Ausgangszustand ist "1px solid white". Ich habe eine Klasse namens "Highlight", die einfach "Grenze: 1px gestrichelt grau" enthält. Ich möchte diese Klasse onmouseover hinzufügen und auf onmouseout entfernen, aber ich kann nicht den gewünschten Effekt erzielen, wenn ich nicht wichtig in der "highlight" -Klasse verwende.
Es hört sich so an, als hätten Sie das Javascript so gut wie es funktioniert, aber es ist nur ein Problem mit der Spezifität Ihres CSS Regeln , weshalb !important es funktioniert.
Sie müssen nur Ihre hervorgehobenen css-Regeln spezifischer als die nicht hervorgehobenen Regeln machen.
%Vor% Bearbeiten mit weiterer Erklärung:
Nehmen wir an, die relevanten Teile Ihres HTML sehen folgendermaßen aus:
und du hast dieses CSS:
%Vor% Derzeit haben alle Listenelemente in ul in #someItem div einen weißen Rahmen und nichts hat die Klasse highlight , also ist nichts grau.
Mit welchen Mitteln auch immer (in Ihrem Fall ein Hover-Ereignis in jQuery), fügen Sie eine Klasse zu einem der Elemente hinzu:
%Vor%Der HTML-Code sieht jetzt ungefähr so aus:
%Vor%Bisher funktioniert Ihr Javascript und HTML einwandfrei, aber Sie sehen keinen grauen Rahmen! Das Problem ist dein CSS. Wenn der Browser versucht zu entscheiden, wie das Element formatiert werden soll, werden alle verschiedenen Selektoren angezeigt, die auf ein Element und die in diesen Selektoren definierten Stile ausgerichtet sind. Wenn es zwei verschiedene Selektoren gibt, die beide den gleichen Stil definieren (in unserem Fall ist die Umrandungsfarbe umstritten), muss sie entscheiden, welcher Stil angewendet werden soll und welcher ignoriert werden soll. Dies geschieht über die so genannte "Spezifität" - also wie spezifisch ein Selektor ist. Wie im HTML-Dog-Artikel beschrieben, wird dazu jedem Teil des Selektors und dem einen ein Wert zugewiesen mit der höchsten Punktzahl gewinnt. Die Punkte sind:
Es gibt noch weitere Regeln, zB: das Schlüsselwort !important und auch Inline-Stile, aber das ist meistens egal, uhh ... "lection". Die einzige andere Sache, die Sie wissen sollten, ist, dass, wenn zwei Selektoren die gleiche Spezifität haben, dann diejenige, die später in der Datei definiert wird, gewinnt.
Zurück zu Ihrem Problem, angesichts der CSS, die wir vorher hatten, können wir sehen, warum es immer noch keinen grauen Rand hat:
%Vor%Wie bereits erwähnt, besteht die Lösung darin, einen spezifischeren Selektor zu erstellen:
%Vor%Und um Ihre Frage in den Kommentaren zu beantworten, müssen Sie nichts von Ihrem Javascript oder HTML ändern, damit dies funktioniert. Wenn Sie diesen Selektor aufschlüsseln, lautet das:
Suchen Sie nach dem Element mit der ID "someItem", innerhalb dessen nach einem ul-Element sucht, und danach nach einem li-Element, auf dem die Klasse "highlight" steht.
... und jetzt, angesichts des einfachen Aufrufs .addClass() , den Sie zuvor gemacht haben, erfüllt die li diese Bedingungen, daher sollte der Rahmen grau werden.
Ab Jquery 1.3.3 können Sie das etwas einfacher machen. Es wird eine verbesserte Version von .toggleClass () geben, die sehr gut sein wird mächtig.
Wenn Sie das nicht in eine Funktion aufteilen müssen, dann können Sie ab 1.3.3 einfach Folgendes tun:
%Vor%Wenn Sie "! wichtig" einschließen müssen, muss Ihre Hervorhebungsklasse möglicherweise spezifischer sein (siehe CSS-Spezifität ).
Ich vermute, Sie verwenden einen Inline-Stil für das Element für den ursprünglichen Stil:
%Vor%Dies überschreibt die Stile, die mit einer Klasse angewendet werden. Anstatt also Inline-Stile zu verwenden, verwenden Sie einfach eine andere Anfangsklasse, um die ursprünglichen Stile anzuwenden:
%Vor%Dies ist ein Beispiel für einen Hover, den ich benutzt habe:
%Vor%Sie müssen nicht wirklich etwas so einfach in separate Funktionen brechen.
Ich vermute, dass Ihr Problem mit einem Konflikt in der CSS-Datei zusammenhängt - versuchen Sie einfach, Ihre Highlight-Klasse anzuwenden, indem Sie sie hartkodieren oder auf einen Klick und sehen, ob sie wirklich funktioniert.
Ich hoffe, das hilft
Jim
Haben Sie einen reinen CSS-Ansatz in Betracht gezogen?
Zum Beispiel:
%Vor% Die Pseudoklasse hover gibt Ihnen das gewünschte Verhalten: Wenn der Benutzer mit dem Mauszeiger über das Element bewegt wird, wird der untere Stil verwendet, andernfalls wird der erste Stil verwendet.
Hinweis: Wenn jemand kommentiert hat, funktioniert dies nicht für nicht a -Elemente in IE. Es funktioniert jedoch für mich in Chrome, Firefox, Safari und Opera.
Es funktioniert auch für jedes Element im IE8- und IE7-Standardmodus. Ich habe jedoch IE6 nicht mit zu testen.
CSS:
%Vor%JS:
%Vor%Normalerweise mache ich es so. (erlaubt mehr Optionen)
Tags und Links javascript jquery css rollover