TD 悬停不工作答案

【问题标题】：TD Hover will not workTD 悬停不工作
【发布时间】：2013-04-13 00:42:24
【问题描述】：

我有以下 CSS：

        td: hover {
        background-color:red;
        }



        td {
        cursor: pointer;
        background-color: rgb(150,150,150);
        }

而我的 HTML 只是：

<table>
<tr><td> </td></tr>
</table>

我无法让hover 工作。这是为什么呢？

【问题讨论】：

标签： html css hover html-table

【解决方案1】：

:hover前面的空格需要去掉：

td:hover {
    background-color: red;
}

【讨论】：

【解决方案2】：

您只需要删除td :hover 之间的空格，因为<td> 没有descendants ..

td:hover 可以工作

http://jsfiddle.net/xwYTa/

【讨论】：

【解决方案3】：

:hover 是一个伪选择器，所有以: 开头的都是这样的（例如:active、:before 等）。

这可能与指定值混淆：

something: value;

因此，您需要将伪选择器视为单独的对象，而不是值。

这就是为什么你需要修复你的td: hover，使它看起来像td:hover。

请注意，如果您在 td 之后放置一个空格，如下所示：

td :hover { ...

这等于：

td: *:hover { ...

因此将选择从td 降序的所有项目，并在悬停时对其应用样式 (see this example)。

记住，空格在 CSS 中是有意义的。

【讨论】：