1

私は 4 つの div を持っています。ホバー時に幅と高さを変更して、ホバーしているものが拡大し、ホバーしたものがどれだけ拡大したかによって他のすべてが縮小するようにします。最初のdivにカーソルを合わせるとうまくいきましたが、他の3つで同じことをしようとすると何も起こりません。私のHTML：

<div  id="main">
        <div  id="mainOne">
            <h3>text</h3>
        </div>
        <div  id="mainTwo">
            <h3>text2</h3>
        </div>
        <div  id="mainThree">
            <h3>text3</h3>
        </div>
        <div  id="mainFour">
            <h3>text4</h3>
        </div>
    </div>

私のCSS：

/* HOVER 1 */

#mainOne:hover{
width:748px;
height:600px;
}

#mainOne:hover + #mainTwo{
width:248px;
height: 600px;
}

#mainOne:hover ~ #mainThree{
height:200px;
}
#mainOne:hover ~ #mainFour{
height:200px;
}

/* END HOVER 1 */

/* HOVER 2 */
#mainTwo:hover{
width:748px;
height:600px;
}

#mainTwo:hover + #mainOne{
width:248px;
height: 600px;
}
#mainTwo:hover + #mainThree{
height:200px;
}
#mainTwo:hover ~ #mainFour{
height:200px;
}

/* END HOVER 2 */

したがって、mainOne にカーソルを合わせるとすべてが変更されますが、mainTwo にカーソルを合わせると、mainTwo だけが変更され、他のすべてが台無しになります。私は何を間違っていますか？ありがとう。

4

2 に答える 2

7

CSS は (現在) DOM の後半に現れる要素のみをターゲットにできるため、機能します#mainTwo + #mainThreeが、#mainTwo + #mainOneできません。

以前の兄弟をターゲットにするには、兄弟を別の親要素内にラップし、その親のホバーに基づいて以前の兄弟のスタイルを設定する必要があります。

div > div {
    border: 1px solid #000;
    padding: 0.5em 1em;
    width: 80%;
    margin: 0 auto;
    color: #f00;
}

#main:hover > div {
    width: 50%;
}

#main:hover > div:hover ~ div {
    width: 50%;
}

#main:hover > div:hover {
    width: 80%;
}

JS フィドルの概念実証

于 2012-11-06T13:35:55.800 に答える
2

隣接する兄弟コンビネータを使用するすべてのmainTwoルール。:hover

#mainTwo + #mainThree どちらにも一致しない#mainOneか#mainFour、 の次の兄弟ではない場合にのみ一致し#mainTwoます。

一般的な兄弟結合子 ( ~) を使用した場合は、一致させることもでき#mainFourます。

#mainOne が に先行する ため#mainTwo、 の存在に依存するルールと一致させることはできません#mainTwo。

于 2012-11-06T13:34:14.707 に答える