DIV background-color ändert sich nicht beim Schweben, wenn ich es vorher gesetzt habe

Question

Ich möchte die background-color eines DIVs ändern, wenn ich den Mauszeiger darüber bewege. Ich kann es zum Funktionieren bringen, wenn ich die background-color in der Eigenschaft style des DIV nicht setze, aber ich verstehe nicht, warum das die Hover-Farbe daran hindert, angewandt zu werden?

<style> 
.hovery { 
    cursor: pointer; 
    display: block; 
    float: left; 
    margin-bottom: 4px; 
    margin-right: 10px; 
    border: 1px solid gray; 
    border-radius: 6px; 
} 
.hovery:hover { 
    background-color: black; 
} 
</style> 

Wenn ich eröffne mein DIV (in PHP) Ich verwende den folgenden Code, und ich bin Einstellung der background-color Eigenschaft zum Zeitpunkt der Schöpfung, so dass ich die ‚ausgewählt‘ gesetzt kann man auf eine andere Farbe als alle anderen DIVs:

echo "<div class='hovery' style='background-color: " . ($onthis==$shrow['Name'] ? $_SESSION['branding_buttonColour'] : "#EEEEFF;"). " '>\r\n"; 

ich entdeckt habe, dass, wenn ich die background-color im Code nicht oben dann die Hover-Farbwechsel funktioniert, aber warum hat die Einstellung der background-color gesetzt tun verhindern, dass die Farbe hover von der Arbeit? Sind das nicht zwei verschiedene Dinge?

Answer 1

Dies nennt man Spezifität und Sie geben dem Inline-Styling die ganze Stärke. Vermeiden Sie es oder machen Sie JavaScript-Tricks (wie beim Hover Hinzufügen eines Klassennamens). Sie können auch das machen:

.hovery:hover { 
    background-color: black !important; 
} 

Aber ich mag es nicht so sehr. Wenn die Inline-Stile für Ihre Anforderungen erforderlich sind, verwenden Sie !important. Entfernen Sie andernfalls die Inline-Stile.

Answer 2

Sie fügen am besten eine Klasse zum PHP-Element hinzu und steuern dann die Klasse background-color dieser Klasse mit CSS.

Die zusätzlichen Vorteile davon ist halten Sie Ihren Code sauber, Vermeidung der Verwendung von Inline-Stilen (die jede Regel übertrifft) und Sie können die Klasse einfach über Javascript ändern, die wiederum die Farbe ändert.