想在悬停时更改表 td 的背景答案

【问题标题】：want to change background of table td on hover想在悬停时更改表 td 的背景
【发布时间】：2010-04-15 00:09:28
【问题描述】：

我有一个显示日历的网页，我想更改链接了日期编号的任何 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;
}

感谢任何帮助。

【问题讨论】：

标签： html css

【解决方案1】：

在我看来，您应该只更改最后两条规则的顺序。在所有其他条件相同的情况下，您应该在 :hover 和 :visited 之前声明 :link，否则它会被级联覆盖。

【讨论】：

:link和:visited的顺序无关紧要（因为它们是互斥的），但是:link+:visited、:hover、:focus和:active 很重要。

【解决方案2】：

你试过了吗

table.main-calendar td:hover a

Firebug 说什么？

【讨论】：

td:hover 需要额外的 Javascript。我会研究 jQuery——这很容易做到。 webdevel.blogspot.com/2006/10/…
只有当你下定决心要在 IE6 上实现美化效果时。为此添加 16k 的 JS 真的不值得。
16k 的 javascript...从 MS 或 Google 免费加载...而且只加载一次...
@sr pr，每个缓存仅一次，假设您的访问者拥有该文件的副本 - 访问了使用相同 Google/谁托管的文件的站点 - 他们不必在全部。
sr pt，不，只有一次，直到他们清除缓存。对于为客户端下载的带宽（16k + 访问您的网站的次数 * 这些页面），该公式可能看起来像这样。就像提到的饭碗一样，js 可能已经从另一个网站（不是您自己的）加载，因为许多网站使用 MS 的缓存或 Google 的。服务器的唯一缺点是提供额外的 JS 链接代码和函数本身。

【解决方案3】：

您的代码只会设置链接的背景颜色，而不是整个表格单元格的背景颜色，因为 CSS 匹配元素（而不是它们的

父元素）。一般来说，在 CSS 中没有办法根据它的子元素来选择元素（参见 Complex CSS selector for parent of active child），所以尽管你可以（假设你不关心 IE6）为编写规则

table.main-calendar td:hover

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

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

【讨论】：

【解决方案4】：

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

【讨论】：