0

我正在尝试修改这个“悬停在任何东西上”的代码（http://csstricks.com/examples/HoverEverythingBut/），以便悬停的链接会改变颜色或者最终被图像替换。我认为完成此任务的最佳方法是使用 nth-child 命令，并且我添加了以下 CSS ...

    #all:hover ul li a:hover:nth-child(1)  { background: #ffffff no-repeat; }
    #all:hover ul li a:hover:nth-child(2)  { background: #000000 no-repeat; }
    #all:hover ul li a:hover:nth-child(3)  { background: #bbbbbb no-repeat; }
    #all:hover ul li a:hover:nth-child(4)  { background: #c73b1b no-repeat; }
    #all:hover ul li a:hover:nth-child(5)  { background: #367db2 no-repeat; }
    #all:hover ul li a:hover:nth-child(6)  { background: #111111 no-repeat; }
    #all:hover ul li a:hover:nth-child(7)  { background: #222222 no-repeat; }
    #all:hover ul li a:hover:nth-child(8)  { background: #333333 no-repeat; }
    #all:hover ul li a:hover:nth-child(9)  { background: #444444 no-repeat; }

不幸的是，似乎只有第一个 nth-child 命令被识别。现在每当我将鼠标悬停在一个链接上（无论是第一个还是最后一个），背景只会变成白色。

任何帮助将不胜感激！谢谢！

4

1 回答 1

1

如果你的 html 是这样<ul><li><a></li><li><a></li>...的，那么第 n 个孩子应该在li

#all:hover ul li:nth-child(1) a:hover  { background: #ffffff no-repeat; }
#all:hover ul li:nth-child(2) a:hover  { background: #000000 no-repeat; }
#all:hover ul li:nth-child(3) a:hover  { background: #bbbbbb no-repeat; }
#all:hover ul li:nth-child(4) a:hover  { background: #c73b1b no-repeat; }
#all:hover ul li:nth-child(5) a:hover  { background: #367db2 no-repeat; }
#all:hover ul li:nth-child(6) a:hover  { background: #111111 no-repeat; }
#all:hover ul li:nth-child(7) a:hover  { background: #222222 no-repeat; }
#all:hover ul li:nth-child(8) a:hover  { background: #333333 no-repeat; }
#all:hover ul li:nth-child(9) a:hover  { background: #444444 no-repeat; }
于 2013-01-27T00:08:02.627 回答