Frage CSS-Hover-Selektor für Hintergrundfarbe funktioniert nicht nach dynamischer Änderung der Hintergrundfarbe mit jQuery


Ich ändere dynamisch die Hintergrundfarbe eines div mit der jquery .css() Methode. Ich möchte auch ein CSS haben hover Selektor auf demselben Div, der die Hintergrundfarbe ändert. Es scheint, dass, bevor die Farbe mit jquery geändert wird, das CSS hover Selektor funktioniert, aber nachdem das Div mit der jquery-Methode geändert wurde, das CSS hover Selektor funktioniert nicht mehr. Gibt es eine Möglichkeit, dies zu umgehen (ohne die jQuery zu verwenden) hover Methode)?

Dies ist ein Beispiel für das, worüber ich spreche: http://jsfiddle.net/KVmCt/1/


21
2018-01-20 23:31


Ursprung


Antworten:


Das Problem, das auftritt, ist die Wichtigkeit des Speicherorts der CSS-Informationen:

Ein externes Stylesheet wird von CSS im Kopf des Dokuments überlagert; das wiederum von CSS in der style Attribut des Elements. Im Grunde überschreibt der letzte Stil des Browsers alle vorher festgelegten und ansonsten widersprüchlichen Regeln (es sei denn, das Schlüsselwort von !important wird eingesetzt).

Da JavaScript und daher jQuery seine CSS- / Styling-Informationen in die Inline-Datei einfügt style Attribut des Elements dies immer Überschreibt an anderer Stelle angegebene Konfliktstile.

Die Orte legen mehr Wert auf die color: red für die divunter Missachtung der div:hover Stile.

Um es zu umgehen, können Sie verwenden:

div:hover {
    background-color: blue!important;
}

JS Fiddle Demo.

Eine bessere Lösung besteht jedoch darin, das Zuweisen des background-color/ Andere Stile mit jQuery und einfach CSS verwenden:

div {
    background-color: red;
}

div:hover {
    background-color: blue!important;
}

Alternativ könnten Sie jQuery's verwenden hover() Methode:

$('div').css('background-color','red').hover(
    function(){
        $(this).css('background-color','blue');
    },
    function(){
        $(this).css('background-color','red');
    });

JS Fiddle Demo.


38
2018-01-20 23:52



Die Jquery css method fügt Ihren Elementen einen Inline-Stil hinzu, was bedeutet, dass Ihr div nach der Ausführung aussehen wird

<div style="background-color: red">Hello world</div>`

Inline-Styling hat immer mehr Priorität als CSS-Styling, daher Ihr Problem.

Also, warum nicht eine CSS-Klasse statt Inline-Styling hinzufügen? Versuchen Sie Folgendes:

$("div").addClass("edited");

und

div:hover, div.edited:hover {
   background-color: blue;
}

div.edited {
   background-color: red;
}

und du wirst sehen, dass es funktioniert.


7
2018-01-20 23:52



Wenn Sie CSS mit jQuery bearbeiten, fügt es es inline hinzu und überschreibt alle CSS in einem Stylesheet. Verwenden Sie jQuery zum Hinzufügen und Entfernen einer Klasse, die die Farbe beim Hover ändert. Hier ist die Arbeitsgeige: http://jsfiddle.net/KVmCt/6/

jQuery sieht so aus:

$("div").hover(
function(){
$(this).addClass("blue");
 }
,
function(){
$(this).removeClass("blue");
});

2
2018-01-20 23:49



Wenn Sie nur den Inline-Stil löschen möchten, den Sie verwenden können

$("#yourselector").attr("style", " ");

Es ersetzt deinen Inline-Stil mit style=" "


2
2017-08-14 19:40



Ein einfacher Weg wäre, das wichtige Tag zu Ihrem CSS hinzuzufügen.

div:hover {
    background-color: blue !important;
};

0
2018-02-07 10:02