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

Question

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

score 6 · Accepted Answer

您需要考虑几件事情：

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

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

score 2 · Accepted Answer

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

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

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

score 0 · Accepted Answer

.menu_links:link { display: block }

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

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

3 回答 3