title: How to change td background-color of td on hover
body: <p>I have a table in my project. Each <code>td</code> of this table has initial <code>background-color:#fafafa</code>.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;style&gt;
      .uTbId tr td:hover {
          background-color: #0000CD;
          color: green;
      }
  &lt;/style&gt;
  &lt;table class="uTbId" border="1" cellspacing="0" style="width:100%;margin-top:30px" bordercolor="lightgray"&gt;
      &lt;tr&gt;
          &lt;td style="position:absolute;width:100px;background-color:#fafafa"&gt;
              &lt;input type="checkbox" id='Tom' /&gt;Tom&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And I want to change td backgroud-color from #fafafa to "#0000CD" when mouse over it, and I tried:</p>
  
  <pre><code>&lt;style&gt;
  .uTbId tr td:hover{background-color:#0000CD;color:green;}
  &lt;/style&gt;
  </code></pre>
  
  <p>But it works fail. The <code>td</code> backgroud-color is still #fafafa when mouse over the td.</p>
  
  <p>And then I tried another way and I found that if <code>td</code> without initial backgroud-color, it works OK. Like:</p>
  
  <pre><code>&lt;td style="position:absolute;width:100px"&gt;&lt;input type="checkbox" id='Tom'/&gt;Tom&lt;/td&gt; // works OK
  </code></pre>
  
  <p>I am confused, it seems nothing is wrong. I can not delete the td initial background-color in my project.</p>
  
  <p>Anyone can help me?</p>