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; }

残念ながら、最初のn番目の子コマンドのみが認識されるようです。これで、リンクにカーソルを合わせると（最初か最後かに関係なく）、背景は白になります。

どんな助けでも大歓迎です！ありがとう！

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 に答える