Question

我有四个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上时，主要的两个变化并将其他所有内容混乱。我究竟做错了什么？感谢。

Answer 1

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

Answer 2

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

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

如果你使用了一般的同级组合子（~），那么你也可以匹配#mainFour。

由于#mainOne 位于 #mainTwo之前，您无法将其与依赖于#mainTwo存在的规则相匹配。

为什么一般兄弟组合器不总是工作？

2 个答案: