我正在尝试修改这个“鼠标悬停在任何东西上”代码(http://csstricks.com/examples/HoverEverythingBut/),这样悬停在上面的链接将会改变颜色,或者最终会被图像所取代。我认为完成此任务的最好方法是使用第n-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; }
不幸的是,似乎只有第一个第n个子命令被识别。现在,每当我将鼠标悬停在一个链接上(无论是第一个还是最后一个),背景只会变成白色。
任何帮助都将不胜感激!谢谢!
发布于 2013-01-27 00:08:03
如果您的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; }
https://stackoverflow.com/questions/14542960
复制相似问题