Deaktivieren Sie den Fokus-Effekt, wenn nicht schwebte

Question

Ich muss unsere eigenen Schaltflächen mit Bootstrap btn Klasse erstellen. Ich muss Standardfarben für den Knopftext insbesondere überschreiben. Ich weiß über .button-variant, aber ich kann es nicht verwenden (die entsprechende LESS-Datei ist nicht im Projekt enthalten und ich kann solche Änderungen nicht vornehmen). Hier ist mein WENIGER:

.some-company-control(@text-color, @hover-text-color) { 
    color: @text-color; 

    &:hover, 
    &:active { 
    color: @hover-text-color; 
    } 
} 

Das Problem wird, nachdem eine Schaltfläche geklickt wird es die Standard Bootstrap Schaltfläche Textfarbe erhält. Wenn ich &:focus hinzufüge, überschreibt es die Standardeinstellungen von Bootstrap, aber nachdem es angeklickt und nicht verschoben wurde, bleibt es immer noch so, als würde es angeklickt. Ich möchte das Styling deaktivieren, wenn eine Schaltfläche immer noch fokussiert, aber nicht mehr aktiviert ist.

Vielen Dank für Anregungen!

Answer 1

Versuchen Sie, diese Regel hinzuzufügen:

&:focus:not(:hover) { 
     color: @text-color; 
    }