Question

I’m trying to modify this “hover on anything but” code(http://csstricks.com/examples/HoverEverythingBut/) so that the link being hovered over will change colors or perhaps eventually be replaced by an image. I figured the best way to accomplish this was with the nth-child command and I have added the following 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; }

Unfortunately, only the first nth-child command seems to be recognized. Now whenever I hover over a link (whether it be the first or last) the background will only turn white.

Any help would be greatly appreciated! Thanks!

Answer 1

If your html is like <ul><li><a></li><li><a></li>... then the nth-child should be on the 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; }