Question

我有以下CSS：

        td: hover {
        background-color:red;
        }



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

我的HTML只是：

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

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

Answer 1

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

这可能与指定值混淆：

something: value;

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

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

请注意，如果您在td之后添加空格，请执行以下操作：

td :hover { ...

这等于：

td: *:hover { ...

因此会选择从td下降的所有项目，并在悬停时应用一种样式（see this example）。

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

Answer 2

您需要删除:hover之前的空格：

td:hover {
    background-color: red;
}

Answer 3

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

td:hover将有效

http://jsfiddle.net/xwYTa/

TD Hover不起作用

3 个答案: