HTML\CSS：使用 CSS 更改悬停状态的单元格背景答案

【问题标题】：HTML\CSS: change cell background for hover state with CSSHTML\CSS：使用 CSS 更改悬停状态的单元格背景
【发布时间】：2010-09-21 18:45:34
【问题描述】：

我想使用 CSS 更改悬停状态的单元格背景颜色.. 它可以通过 JavaScript 实现，但我想用 CSS 来实现...另外我希望整个单元格充当链接如何做到这一点

【问题讨论】：

【解决方案1】：

您需要考虑几件事情：

不要混合使用 CSS 和展示性 HTML，否则会变得非常混乱。颜色（用于文本、背景、边框）、大小、对齐方式以及与网站外观有关的任何内容都属于 CSS。
尽量避免使用表格进行布局。作为初学者，它们可能看起来更容易，但这是一种过时的技术。
在 CSS 中，您需要将 :hover 规则移到 :visited 规则之前。由于这两个规则具有相同的特性，第一个规则（当前为:visited）将永远不会应用悬停规则。
您不需要在 CSS 中为每个规则重复样式。由于继承和级联，许多样式会自动应用于子元素。
您需要在链接而不是表格单元格上设置背景颜色，然后您可以更改悬停时的背景颜色，就像您已经使用文本颜色一样。
提供链接display: block 将使链接延伸到其包含块的整个宽度，因为这是块元素的默认行为。

下面是一个示例，使用“干净”的 CSS 和 HTML 的相同布局应该如下所示：

【讨论】：

【解决方案2】：

给菜单的table标签一个id，然后：

#menu-table td:hover { background: whatever; }

实际上，您不应该将表用于数据表以外的任何东西，它们很难维护和破坏语义。

【讨论】：

【解决方案3】：

.menu_links:link { display: block }

使整个单元格充当链接（尽管您需要添加一点边距/填充）。然后你可以添加.menu_links:hover { background: #123123 } 来为背景着色。

另外，我可以建议您在样式表中设置所有表格的样式。 <table bordercolor="red" bgcolor="#ffffff"> 非常过时，使网站的维护成为地狱。

【讨论】：