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

Question

查看此jsFIDDLE sample

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

Answer 1

您需要考虑以下几点：

• 不要混用CSS和表示HTML，否则会变得非常混乱。颜色（用于文本，背景，边框），尺寸，对齐，与网站外观有关的任何内容都属于CSS。

• 尽量避免使用表格进行布局。作为初学者，它们看起来似乎更容易，但它是一种过时的技术。

• 在CSS中，您需要在:hover规则之前移动:visited规则。由于两个规则具有相同的特异性，因此具有优先选择和访问链接的第一个规则（当前为:visited）将永远不会应用悬停规则。

• 您不需要在CSS中为每个规则重复样式。由于继承和级联，许多样式会自动应用于子元素。

• 您需要在链接上设置背景颜色而不是表格单元格，然后您可以在悬停时更改背景颜色，就像使用文本颜色一样。

• 给链接display: block会使链接在其包含块的整个宽度上延伸，因为这是块元素的默认行为。

以下是“干净”CSS和HTML的相同布局应如何显示的示例：

http://www.jsfiddle.net/QShRF/5/

Answer 2

将菜单的table标记设为ID，然后输入：

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

但是，实际上，除了数据表之外，你不应该使用表，它们很难维护和破坏语义。

Answer 3

.menu_links:link { display: block }

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

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