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

Moo*_*oon 2 html css hyperlink tablecell onhover

看看这个jsFIDDLE样本

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

RoT*_*oRa 6

您需要考虑以下几点:

  • 不要混用CSS和表示HTML,否则会变得非常混乱.颜色(用于文本,背景,边框),大小,对齐,任何与网站外观有关的内容都属于CSS.

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

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

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

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

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

下面是一个示例,如何使用"干净"的CSS和HTML进行相同的布局:

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