HTML\CSS : change cell background for hover state with CSS

Question

看看这个jsFIDDLE sample

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

Answer 1

您需要考虑几件事情:

• 不要混合使用 CSS 和表示性 HTML，否则会变得非常困惑。颜色(文本、背景、边框)、大小、对齐方式以及与网站外观有关的任何内容都属于 CSS。

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

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

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

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

• 提供链接 display: block 将使链接延伸到包含 block 的整个宽度，因为这是 block 元素的默认行为。

这是一个示例，使用“干净”的 CSS 和 HTML 的相同布局应该是这样的:

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