2

http://jsbin.com/onujiq/1/のように、中央に 6 つの小さな画像と 1 つの大きな画像 (実際には 6 つのレイヤーで、それぞれに 1 つの画像が含まれます) を含む Web ページがあります。すべての中心画像の z-index プロパティを (-1) に設定しました。私がやろうとしているのは、6つの小さな画像のうちの1つにカーソルを合わせると、それぞれの画像が中央の大きな画像として表示されることです(それぞれの中央の画像のz-indexを5に変更するなど); でもどう頑張っても思い通りにはいかない。これで私を助けてください（私はCSSのみを使用しています）; 前もって感謝します ！

PS：ホバーについてテストするときのもう1つの紛らわしい問題は、このコードを使用するときです：

#img3:hover + #img4{
    opacity: 0.2;
}

それは機能しますが、これを使用すると：

#img3:hover + #img5{
    opacity: 0.2;
}

そうではありません！#img4 と #img5 の大きな違いは何ですか??

4

2 に答える 2

2

http://jsfiddle.net/yy9Rr/

あなたのソリューションは近いものでしたが、それを変更する必要があります

#img3:hover + #img4{
    opacity: 0.2;
}

を使う、の~ようなものを与える

#img3:hover ~ #imgCenter3 {
    z-index: 10;
}

a + bb要素の直後にある要素を言いますa

a ~ bbは、 の次の兄弟である任意の要素を示しますがa、必ずしもすぐ隣接しているわけではありません。

于 2013-07-18T02:01:44.140 に答える