Es klingt, als ob Sie die Javascript-Funktion gut so wie es ist, aber es ist nur ein Problem mit der specificity of your CSS rules, weshalb !important macht es funktioniert.
Sie müssen nur Ihre hervorgehobenen CSS-Regeln spezifischer als die nicht hervorgehobenen Regeln machen.
#someItem ul li { /* Specificity = 102 */
border-color: white;
}
.highlight { /* Specificity = 10 -- not specific enough! */
border-color: grey;
}
#someItem ul li.highlight { /* Specificity = 112 -- this will work */
border-color: grey;
}
Bearbeiten mit weiteren Erklärung:
Lassen Sie uns sagen, dass die relevanten Teile Ihrer HTML wie folgt aussehen:
<div id="someItem">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
und Sie haben diese CSS:
#someItem ul li {
border: 1px solid white;
}
.highlight {
border-color: grey;
}
Derzeit sind alle Listenelemente in der ul in #someItem div wird einen weißen Rahmen haben, und nichts hat die Klasse highlight, also ist nichts grau.
Durch alles, was bedeutet, dass Sie (in Ihrem Fall ein Hover-Ereignis in jQuery) möchten, können Sie eine Klasse zu einem der Elemente hinzufügen:
$(this).addClass('highlight');
Die HTML wird nun wie folgt aussehen:
<div id="someItem">
<ul>
<li>Item 1</li>
<li class="highlight">Item 2</li>
<li>Item 3</li>
</ul>
</div>
Bis jetzt funktioniert Ihr Javascript und HTML gut, aber Sie sehen keine graue Grenze! 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 in der HTML Dog article beschrieben, geschieht dies, indem jedem Teil des Selektors ein Wert zugewiesen wird und derjenige mit der höchsten Punktzahl gewinnt. Die Punkte sind:
- Elementselektoreinrichtung (zB: "ul", "Li", "Tabelle") = 1 Punkt
- Klassenselektor (zB: ".highlight", ".active",“. Menü ") = 10 Punkte
- id-Selektor (zB: "#someItem", "#mainContent") = 100 Punkte
Es gibt einige weitere Regeln, zum Beispiel: das Schlüsselwort !important und auch Inline-Stile, aber das ist meistens irrelevant dafür, äh ... "Lektion". Die einzige andere Sache, die Sie wissen sollten, ist, dass, wenn zwei Selektoren die gleiche Spezifität haben, die in der Datei später definierte Datei gewinnt.
zurück zu Ihrem Problem gehen, da die CSS wir vorher hatten, können wir, warum es immer noch nicht bekam einen grauen Rand sehen:
#someItem ul li = id + element + element = 100 + 1 + 1 = 102 points
.highlight = class = 10 points
Wie bereits erwähnt, ist die Lösung einen spezifischeren Selektor zu erstellen:
#someItem ul li.highlight
= id + element + element + class
= 100 + 1 + 1 + 10
= 112 points
und Ihre Frage in den Kommentaren zu beantworten, brauchen Sie nicht für diese arbeiten alle Ihre Javascript oder HTML zu ändern.Wenn Sie, dass Wähler brechen, was es sagen will, ist:
Suchen Sie das Element mit der ID „someItem“, im Inneren, die für ein ul-Element suchen, und dann Element eine li, die die Klasse „Highlight“ auf sich hat .
... und jetzt die einfache .addClass() Anruf gegeben, dass Sie früher gemacht, die li erfüllt diese Bedingungen, so sollte die Grenze grau.
Könnten Sie etwas Code zeigen? –
BTW, Brian: Da Sie jQuery verwenden, möchten Sie vielleicht die Hover-Ereignis-Helper-Methode auschecken: http://docs.jquery.com/Events/hover – Shog9