CODEWITHSUNDEEP
htmlcss
stack
stack

Reputation: 841

How to change td background-color of td on hover

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?

Upvotes: 1

Views: 7823

Answers (4)

Erdogan Kurtur
Erdogan Kurtur

Reputation: 3685

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>

Upvotes: 2

Sanjay Kumar Singh
Sanjay Kumar Singh

Reputation: 937

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>

Upvotes: 1

gurvinder372
gurvinder372

Reputation: 68393

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>

Upvotes: 1

Nikhil Eshvar
Nikhil Eshvar

Reputation: 495

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

Upvotes: 0

Related Questions