Hintergrund-Farbübergang funktioniert nicht

Question

Ich habe ein Problem mit dem Hintergrund-Farbe-Übergang: Wenn ich den Hintergrund des Objekts in CSS definieren und dann den Übergang hinzufügen, funktioniert es gut, aber wenn ich das gleiche in HTML ich tut nichts ... Die Codes sind:

.container a { 
 
    background-color: #333; 
 
    transition: background-color 0.2s; 
 
} 
 

 
.container a:hover { 
 
    background-color: red; 
 
}

<div class="container"> 
 
    <a href="#">Login</a> 
 
    <!-- This works well--> 
 
    <a href="#" style="background-color: green">Login</a> 
 
    <!-- This does not--> 
 
</div>

Irgendwelche Ideen?

Answer 1

Inline-Stile haben die höchste specificity, so dass Ihre Regel nicht angewendet wird. Sie können rund um das erhalten, indem nicht Inline-Stile verwenden, oder die gefürchtete !important die Regel

.container a { 
 
    background-color: #333; 
 
    transition: background-color 0.2s; 
 
} 
 

 
.container a:hover { 
 
    background-color: red !important; 
 
}

<div class="container"> 
 
    <a href="#">Login</a> 
 
    <!-- This works well--> 
 
    <a href="#" style="background-color: green">Login</a> 
 
    <!-- This does not--> 
 
</div>