Warum verwendet jquery css background.color entfernen: Hover?

Question

Hier ist ein Beispiel: https://jsfiddle.net/6kg43qfr/

Code:

JQuery:

$('#foo').css('background-color', '#f8f7f7'); 

Html:

<div id="foo"> 
test 
</div> 

CSS:

#foo:hover{ 

    background-color: red; 

} 

Frage: Warum funktioniert der Hover nicht?

Answer 1

Das ist, weil Sie die Farbe in Ihrem JavaScript-Code festlegen. Inline-Stile hat mehr Priorität als Stile für Klassen oder IDs

Es gibt tatsächlich viele Regeln, wie Stile ordnungsgemäß überschrieben werden. Bitte werfen Sie einen kurzen Blick auf diese http://www.hongkiat.com/blog/css-priority-level/

Ich empfehle Ihnen dringend, mehr über CSS zu lesen, bevor Sie mit dem Projekt fortfahren, um Code sauber und wartbar zu halten.

, um Ihre Bedürfnisse zu erfüllen, werfen Sie einen Blick auf diese Geige: https://jsfiddle.net/6kg43qfr/2/

$('#foo').addClass("green-background") 

Answer 2

Da die $('#foo').css()-Funktion den Stil in ein style-Attribut für das Element einfügt, das daher das Stylesheet überschreibt.

Answer 3

Die beste Lösung ist:

#foo:hover{ 
    background-color: red; 
} 

#foo { 
    background-color: #f8f7f7; 
} 

Oder

Sie können auch verwenden:

$('#foo').css('background-color', '#f8f7f7').hover(
function(){ 
    $(this).css('background-color','red'); 
}, 
function(){ 
    $(this).css('background-color','#f8f7f7'); 
});