伪类中的类

Question

我有兴趣构建一个向后兼容的菜单栏.我只想使用HTML和CSS.所以我在想一个包含多个单元格的表格,每个单元格都设置了不同的bkgnd颜色,具体取决于它的状态.有点......

a:link {
.cell01{background-color:#white};
.cell02{background-color:#white};
}

a:hover {
.cell01{background-color:#red};
.cell02{background-color:#blue};
}

(我正在考虑这样的事情,因为我想要整个单元格,而不仅仅是单元格中的文本要受影响).显然这个例子不起作用......但是有办法吗？

提前致谢

贾尔斯

Answer 1

你可能不应该想到一张桌子.您可以轻松地为UL设置样式以具有导航的外观,这在语义上更加正确.

无论如何 - 从CSS上面我猜你在里面有一张桌子链接？如果是这样,那么正确的语法将是:

a:link .cell01 { background-color: #fff; }
a:hover .cell01 { background-color: #f00; }

等等

(如果你想使用颜色名称,那么你不要使用#符号.如果你使用十六进制值,那么使用#,就像我上面所做的那样).

或者你在细胞内有链接？在这种情况下,你会切换项目,例如

.cell01 a:link {background-color: white; }

希望能帮助到你!

更新:

啊 - 史蒂夫上面的回答让我对你要做的事情有了更好的了解......你在表格单元格中有链接,你希望整个单元格在盘旋时改变吗？那简单地说:

.cell01 { background-color: #fff; }
.cell02:hover { background-color: #f00; }

请注意,这在IE6上无法正常工作,因为仅在IE6中A元素具有悬停状态.你可以通过在Javascript中添加一个额外的类来解决这个问题......