HTML \ CSS：改变细胞背景悬停状态与CSS

问题描述：

我想改变与CSS ..它可以通过JavaScript来实现悬停状态的单元格背景颜色，但我想这样做用CSS ...再加上我想整个小区作为一个链接怎么办呢

答

有你需要考虑几件事情：

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

下面是一个例子相同的布局与“干净”的CSS和HTML应该怎么样子：

^这。我可以删除我的答案，这个应该会赢。 – 2010-09-21 10:28:05

它确实.. @RoToRa：我不擅长CSS ..你能帮我解决这个问题吗？http://jsfiddle.net/Dk9fD/ – Moon 2010-09-21 17:19:33

你可以回复这个http://*.com/问题/ 3762793/HTML到CSS的菜单风格转换需要 – Moon 2010-09-21 17:28:51

答

给菜单的table标签的ID，然后：

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

真的，不过，你不应该使用表除了数据表之外的任何东西，th很难维护和破坏语义。

是啊，让我们给所有的TD是一个类。浪费字节，尤其是在添加/删除单元格时的时间。在这种情况下，只需给该表一个ID并使用'table＃id> td'。 – 2010-09-21 10:24:52

更好的主意，谢谢。另外，'''不应该被使用，因为它意味着直接的后代，而'td'不是（它在'tr'中）。 – 2010-09-21 10:32:04

你是对的，我的坏:) – 2010-09-21 13:44:47

答

.menu_links:link { display: block }

使得整个小区充当链接（你需要，虽然加少许保证金/填充）。然后，您只需添加.menu_links:hover { background: #123123 }即可为背景着色。

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