Question

我有一个显示日历的网页，我想更改任何连接了日期编号的td的背景颜色，因此当我将鼠标悬停在那一天时，它会更改背景颜色。

我认为这样可行：

.main-calendar td {
    width:14%;
    height:100px;
    text-align:center;
    border:1px solid #000;
    font-size:20px;
    vertical-align:middle;
    display:block;
}

table.main-calendar td a:hover,
table.main-calendar td a:visited {
    display:block;
    text-decoration:none;
    background-color:red;
    color:#fff;
}

table.main-calendar td a:link {
    display:block;
    text-decoration:none;
    background-color:green;
    color:#fff;
}

感谢任何帮助。

Answer 1

在我看来，你应该只改变最后两条规则的顺序。在所有其他条件相同的情况下，您应该声明：link before：hover和：visited，否则它会被级联过度控制。

Answer 2

你试过吗

table.main-calendar td:hover a

Firebug说什么？

Answer 3

您的代码将仅设置链接的背景颜色，而不是整个表格单元格的背景颜色，因为CSS与＆lt; a＆gt;匹配。元素（不是他们的＆lt; td＆gt;父母）。一般情况下，CSS中没有办法根据它的子项选择一个元素（参见Complex CSS selector for parent of active child），所以尽管你可以（假设你不关心IE6）为

编写规则

table.main-calendar td:hover

并将鼠标悬停在单元格上时突出显示该单元格，您无法确定此单元格是否包含链接（已访问过或以其他方式）。

所以你需要采用另一种方法，要么让链接占用整个表格单元格（如果每个单元格只有一个链接），要么使用某种JavaScript。

Answer 4

请注意，在IE6中，只能在锚标记上识别悬停属性。所以小心使用悬停在非锚点上来传达重要信息。如果它不是必需的，请继续并将鼠标悬停在td上。

想要在悬停时更改表格td的背景

4 个答案: