為什么通用同級組合器不能一直工作？

Question

我有四個div，我想在懸停時更改其寬度和高度，因此您要懸停的那一個會展開，而所有其他都會縮小，其中一個懸停了多少。 當我將鼠標懸停在第一個div上時，我設法使其正常工作，但是當我嘗試與其他三個div進行相同操作時，沒有任何反應。 我的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發生變化並弄亂了其他所有內容。 我究竟做錯了什么？ 謝謝。

Answer 1

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提琴概念證明

Answer 2

您所有帶有:hover mainTwo規則都使用相鄰的同級組合器。

只有#mainTwo + #mainThree可以匹配既不#mainOne或#mainFour是下一個兄弟到#mainTwo 。

如果您使用了通用的同級組合器（ ~ ），那么您也可以匹配#mainFour 。

由於#mainOne 先 #mainTwo ，你不能依賴於是否存在規則匹配它#mainTwo 。