CODEWITHSUNDEEP
htmlcsstransitionbackground-color
Simplemathic
Simplemathic

Reputation: 111

Background-color transition doesn't work

I have an issue with the background-color transition: If I define the object's background in CSS and then add the transition to it, it works well, but if I do the same in HTML, I does nothing... The codes are:

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

Any ideas?

Upvotes: 0

Views: 3656

Answers (1)

j08691
j08691

Reputation: 207901

Inline styles have the highest specificity, so your rule isn't being applied. You can get around that by not using inline styles, or applying the dreaded !important to the rule

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

Upvotes: 4

Related Questions