HTML：所有具有不同颜色的单元格的悬停效果答案

【问题标题】：HTML : hover effect for all cell with different coloursHTML：所有具有不同颜色的单元格的悬停效果
【发布时间】：2017-05-30 08:07:46
【问题描述】：

是否可以为所有具有不同颜色的表格单元格提供相同的悬停效果？

td:hover {
    background-color:black;
    color:white;
}

<td style="background-color:yellow;">
<td style="background-color:red;">

悬停效果不起作用。

然后我尝试使用#id 为每个单元格分配不同的单元格颜色，但悬停效果仍然不起作用。

来自 w3schools：hover 必须在 :link 和 :visited 之后（如果它们是 present) 在 CSS 定义中，以便生效！

我已经将鼠标悬停在链接之后。

有什么我想念的吗？

谢谢！

【问题讨论】：

标签： html css hover

【解决方案1】：

使用 !important 覆盖 - 因为您使用了内联 style=""

background-color: black !important;

或者宁可使用类：

.yellow{
  background-color: yellow;
}
.red{
  background-color: red;
}

td:hover {
  background-color: black;
  color: white;
}

<table>
  <tr>
    <td class="yellow">YELLOW</td>
    <td class="red">RED</td>
  </tr>
</table>

因为无论如何，内联样式都是糟糕设计的标志。

【讨论】：

嗨 Roko，谢谢你的代码，我现在可以使用类为单元格分配颜色！但不适用于第一个表格单元格，该单元格仅采用页面的背景颜色。您需要查看我的代码以了解导致问题的原因吗？
@Santa 不，我想，你应该检查元素，看看是什么 rule 覆盖了你的 try。当您确定该规则时，您需要向压倒一切的新规则添加更高的特异性，例如：#parent table td:hover 等...尝试单独弄清楚:) 使用开发人员工具对您自己的代码进行调查。如果它仍然不起作用，请创建一个 jsBin 或 jsFiddle。

【解决方案2】：

style tag 和inline attribute 之间的一个重要区别是特异性。特异性决定了一种风格何时覆盖另一种风格。通常，内联样式具有更高的特异性。

参考号：https://stuffandnonsense.co.uk/archives/css_specificity_wars.html

内联样式的`Specificity` 比 CSS 样式表高，所以你必须使用 !important 覆盖它。

或

@Roko C. Buljan 回答中的 AS，使用类而不是内联样式可以避免此类问题，建议这样做。

td:hover {
  background-color: black !important;
  color: white;
}

<table>
  <td style="background-color:yellow;">111</td>
  <td style="background-color:red;">222</td>
</table>

【讨论】：

【解决方案3】：

尝试使用类代替内联样式。

【讨论】：

内联样式的Specificity 比 CSS 样式表高，所以你必须使用 !important 覆盖它。

@Roko C. Buljan 回答中的 AS，使用类而不是内联样式可以避免此类问题，建议这样做。

内联样式的`Specificity` 比 CSS 样式表高，所以你必须使用 !important 覆盖它。