Aufruf der JS-Funktion beim Klicken auf die Schaltfläche Blockiert CSS: hover

Question

Ich implementiere eine CSS-Hover-Methode für alle meine Schaltflächen. Es sieht wie folgt aus:

Diese Methode funktioniert einwandfrei, bis ich auf einen meiner Knöpfe klicke. Wenn die Schaltfläche geklickt wird, wird eine JS-Funktion mit diesem Code genannt:

<div id= "one"><button class="button" id = "b1" value="0" onclick="checker(this.id)"></button></div> 

Dies ist der JS-Skript ist:

var checker = function(id) 
{ 
    var xyz = id; 
    var value = document.getElementById(xyz).value 

    if (answerjson[value].is_right_choice==1) 
    { 
     for (var i = 1; i <=4; i++) { 
      document.getElementById("b"+i).style.background='#722F37'; 
     } 
     document.getElementById(xyz).style.background='green'; 
     setTimeout(function(){ alert("Correct!"); }, 100); 
    } 
    else { 
     for (var i = 1; i <=4; i++) { 
      document.getElementById("b"+i).style.background='#722F37'; 

     } 
     document.getElementById(xyz).style.background='red'; 
     setTimeout(function(){ alert("Sorry, Try Again"); }, 100); 

    } 

} 

Danach Skript aufgerufen wird, meine Tasten schweben nicht mehr die Farbe ändern. Irgendwelche Ideen warum?

Answer 1

Das passiert, weil wenn Sie Hintergrundfarbe mit Javascript hinzufügen, es als Inline-Styling hinzugefügt wird und es überschreibt die CSS-Klassenselektor, weil Inline-Styling immer mehr Vorliebe hat. Sie müssen eine Klasse mit dieser Farbe erstellen und diese mithilfe von JavaScript hinzufügen/entfernen. z.B. Eine Klasse

.green{ 
    background-color: green; 
} 

und fügen Sie dann wie folgt mit Hilfe von Javascript:

document.getElementById(xyz).className += " green"; 

Answer 2

Sie legen das Inline-Attribut style="" in Ihrem JS-Code fest.

In Inline-Stilen festgelegte Eigenschaften überschreiben immer CSS-Selektoren (außer !important), sodass Ihr CSS nichts mehr tut.

Sie sollten eine CSS-Klasse hinzufügen, anstatt einen Inline-Stil festzulegen.