Question

我的项目中有一张桌子。此表的每个td都有初始background-color:#fafafa。

这是我的代码：

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

我想把#fafafa的td背景颜色改为＆＃34;＃0000CD＆＃34;当鼠标悬停在它上面时，我试过了：

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

但它失败了。当鼠标悬停在td上时，td背景颜色仍然是#fafafa。

然后我尝试了另一种方式，我发现如果td没有初始背景颜色，它就可以了。像：

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

我很困惑，似乎没有错。我无法删除项目中的td初始背景颜色。

任何人都可以帮助我？

Answer 1

在css中设置默认background-color，否则内联样式只能是overriden by !important。

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

<强>演示

.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

以下代码可以检查鼠标悬停在任何td上的将为您提供给定的背景颜色。

＆＃13;

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

＆＃13;

Answer 3

CSS特性正在阻止这种情况，因为样式标记比给定的css样式更具体。这里的答案建议mxPr，但我敦促你不要使用它，除非绝对必要。只需给你的funcInputs[3] = mxCreateDoubleScalar(33);课程，你就完成了

!important

Answer 4

在悬停时添加！important为背景颜色。

background-color:#0000CD !important

由于您将样式添加为内联，因此您提供的白色背景优先，因此您会收到此错误。添加！重要修复了这个......

Codepen链接： https://codepen.io/anon/pen/rpQybJ

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

4 个答案: