transition arrière-plan de couleur ne je fonctionne pas

Question

un problème avec la transition couleur de fond: Si je définis l'arrière-plan dans le CSS de l'objet, puis ajouter la transition vers, il fonctionne bien, mais si je fais la même chose en HTML , je ne fait rien ... Les codes sont les suivants:

.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>

Toutes les idées?

Answer 1

Les styles en ligne sont les plus specificity, de sorte que votre règle n'est pas appliquée. Vous pouvez contourner cela par l'absence de styles en ligne, ou l'application de la !important redoutée à la règle

.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>