mouseover() mouseout() jQuery add/removeClass problem

Es klingt, als ob Sie haben die javascript-Sie arbeiten in Ordnung ist, aber es ist nur ein problem mit der die Spezifität der CSS-Regeln, das ist der Grund, warum !important macht es Arbeit.

Den Sie gerade haben, um Ihren hervorgehobenen css-Regeln, die spezifischer als die nicht-markierten Regeln.

#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 der weiteren Erklärung:

Sagen wir mal die relevanten Teile deiner HTML so Aussehen:

<div id="someItem">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

haben, und Sie haben dieses CSS:

#someItem ul li {
    border: 1px solid white;
}
.highlight {
    border-color: grey;
}

Derzeit, alle die Elemente der Liste in der ul im #someItem div haben einen weißen Rand, und nichts hat die Klasse highlight also nix Grau.

Durch welche Mittel auch immer Sie möchten (in Ihrem Fall ein hover-event in jQuery), fügen Sie eine Klasse zu einem der Elemente:

$(this).addClass('highlight'); 

Wird der HTML-Code nun wie folgt Aussehen:

<div id="someItem">
    <ul>
        <li>Item 1</li>
        <li class="highlight">Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

So weit, Javascript-und HTML funktionieren, aber Sie nicht sehen, einen grauen Rand! Das problem ist dein CSS. Wenn der browser versucht, zu entscheiden, wie, style-element, es sieht bei all den verschiedenen Selektoren, die target-element und die Stile, in denen definiert wird, Selektoren. Wenn es zwei verschiedene Selektoren beide definieren den gleichen Stil (in unserem Fall die Rahmenfarbe ist umstritten), dann hat es zu entscheiden, welchen Stil Sie anwenden und welche zu ignorieren sind. Er tut dies mittels dessen, was ist bekannt als "Spezifität" - das ist, wie spezifisch der Selektor ist. Wie in der HTML-Hund Artikel, es tut dies durch die Zuweisung eines Wertes zu jedem Teil Ihres selector, und derjenige mit der höchsten Punktzahl gewinnt. Die Punkte sind:

• element-Selektor (z.B.: "ul", "li", "Tabelle") = 1 Punkt
• class-Selektor (z.B.: ".highlight", ".aktiv", ".Menü") = 10 Punkte
• id-Selektor (z.B.: "#someItem", "#mainContent") = 100 Punkte

Gibt es einige weitere Regeln, z.B.: mit dem Schlüsselwort !important und auch inline-styles, aber das ist weitgehend irrelevant, für diese, ähh... "Lektion". Die einzige andere Sache, die Sie wissen sollten ist, dass, wenn zwei Selektoren die gleiche Spezifität, bei der man dann später festgelegt in der Datei wins.

Um auf dein problem zurückzukommen, angesichts der CSS hatten wir vor, wir können sehen, warum es immer noch nicht habe eine graue Einfassung:

#someItem ul li = id + element + element = 100 + 1 + 1 = 102 Punkte 
.highlight = Klasse = 10 Punkte 

Wie bereits erwähnt, die Lösung ist die Schaffung eines spezifischeren Selektor:

#someItem ul li.highlight 
= id + element + element + Klasse 
= 100 + 1 + 1 + 10 
= 112 Punkte 

Und beantworten Ihre Frage in den Kommentaren, die Sie nicht ändern müssen Ihre javascript oder HTML-Code für diese zu arbeiten. Wenn Sie brechen, dass der Selektor, das was er sagt ist:

Blick für das element mit der id "someItem", im inneren, die nach einem ul-element und dann ein li-element hat die Klasse "highlight" auf.

...und nun, in Anbetracht der einfachen .addClass() nennen, die Sie früher gemacht, die li erfüllt diese Bedingungen, so dass der Rand soll Grau.

Ich vermute, Sie verwenden einen inline-Stil auf das element, für das ursprüngliche Stil:

<style type="text/css">
  .hover { border: 1px dashed gray; } /* will never apply */
</style>

...

<!-- this style has priority over class styles! -->
<div style="border: 1px solid white"> 
...
</div>

Diese überschreiben die Formatvorlagen mit einem Klasse... So anstelle der Verwendung von inline-styles, benutzen Sie einfach eine andere erste Klasse gelten die ursprünglichen Stile:

<style type="text/css">
  .normal { border: 1px solid white; }
  .hover { border: 1px dashed gray; }
</style>

...

<div class="normal">
...
</div>

Haben Sie als eine Reine css-Ansatz?

Beispiel:

someClass {
    border: 1px solid white;
}

someClass:hover {
    border: 1px dashed gray;
}

Den hover pseudo-Klasse wird, geben Sie das Verhalten, das Sie wollen: wenn der Benutzer moused über das element, wird der untere Stil, sonst wird es mit dem ersten Stil.

Hinweis: als jemand bemerkte, dies funktioniert nicht für nicht a Elemente im IE. Es funktioniert aber bei mir in Chrome, Firefox, Safari und Opera.

Funktioniert es auch für jedes element im IE8 und IE7-standards-Modus. Ich habe keinen IE6 zu testen, wenn.

Oder Sie können nur tun Sie es mit einfachen CSS:

#namehere { border: 1px solid #fff; }
#namehere:hover { border: 1px dashed #aaa }