如何在悬停时更改td的td背景颜色

Question

I have a table in my project. Each td of this table has initial background-color:#fafafa .

Here is my code:

<style>
    .uTbId tr td:hover {
        background-color: #0000CD;
        color: green;
    }
</style>
<table class="uTbId" border="1" cellspacing="0" style="width:100%;margin-top:30px" bordercolor="lightgray">
    <tr>
        <td style="position:absolute;width:100px;background-color:#fafafa">
            <input type="checkbox" id='Tom' />Tom</td>
    </tr>
</table>

And I want to change td backgroud-color from #fafafa to "#0000CD" when mouse over it, and I tried:

<style>
.uTbId tr td:hover{background-color:#0000CD;color:green;}
</style>

But it works fail. The td backgroud-color is still #fafafa when mouse over the td.

And then I tried another way and I found that if td without initial backgroud-color, it works OK. Like:

<td style="position:absolute;width:100px"><input type="checkbox" id='Tom'/>Tom</td> // works OK

I am confused, it seems nothing is wrong. I can not delete the td initial background-color in my project.

Anyone can help me?

Answer 1

Set the default background-color in the css itself, otherwise inline styles can only be overriden by !important .

.uTbId tr td {
  background-color: #fafafa;
  color: green;
}

Demo

 .uTbId tr td { background-color: #fafafa; color: green; } .uTbId tr td:hover { background-color: #0000CD; color: green; } 

 <table class="uTbId" border="1" cellspacing="0" style="width:100%;margin-top:30px" bordercolor="lightgray"> <tr> <td style="width:100px;"><input type="checkbox" id='Tom' />Tom</td> </tr> </table> 

Answer 2

Here is the code you can check where on mouse hover on any td will give you, your given background-color.

 <table class="uTbId" border="1" cellspacing="0" style="width:100%;margin-top:30px" bordercolor="lightgray"> <tr> <td style="width:100px;"><input type="checkbox" id='Tom' />Tom</td> </tr> </table> <style> table.uTbId tr>td:hover{ background-color:#0000CD; } </style> 

Answer 3

CSS Specificity is preventing that, since style tag is more specific than given css style. Answers here suggest to !important , but I urge you to not use it, unless it is absolutely necessary. Just give your td a class and you will be done

<style>
  .uTbId td.check {
    position: absolute;
    width: 100px;
    background-color: #fafafa
  }

  .uTbId td.check:hover {
        background-color: #0000CD;
        color: green;
  }

</style>
<table class="uTbId" border="1" cellspacing="0" style="width:100%;margin-top:30px" bordercolor="lightgray">
    <tr>
        <td class="check">
            <input type="checkbox" id='Tom' />Tom</td>
    </tr>
</table>

Answer 4

Add !important to the background-color on hover.

background-color:#0000CD !important

Since you added the style as inline, the white background you gave has taken precedence and hence you get this error. Adding !important fixes this...

Codepen link: https://codepen.io/anon/pen/rpQybJ