为啥通用兄弟组合器并不总是有效？

Posted 2023-03-06

【中文标题】为啥通用兄弟组合器并不总是有效？

【英文标题】：Why is General sibling combinator not always working?为什么通用兄弟组合器并不总是有效？

【发布时间】：2012-10-26 11:16:24

【问题描述】：

我有四个 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 会发生变化并弄乱其他所有内容。我究竟做错了什么？ 谢谢。

【参考方案1】：

所有带有:hover 的mainTwo 规则都使用相邻的兄弟组合。

只有#mainTwo + #mainThree 不能匹配，因为#mainOne 或#mainFour 都不是#mainTwo 的下一个兄弟。

如果您使用通用兄弟组合器 (~)，那么您也可以匹配 #mainFour。

由于#mainOne precedes #mainTwo，你不能将它与依赖于#mainTwo存在的规则匹配。

【讨论】：

谢谢，我改变了组合器，但我仍然得到相同的结果。

【参考方案2】：

CSS 只能 (currently) 定位 稍后 出现在 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 fiddle proof-of-concept

【讨论】：

我现在明白了问题所在，我注意到现在一切都缩小了，但 mainOne，因为它在 mainTwo 之前，但看起来这个解决方案对我来说有点太复杂了，所以我会采取我的时间来理解它。非常感谢。