1

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

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 fiddle 概念验证

于 2012-11-06T13:35:55.800 回答
2

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

只能#mainTwo + #mainThree 匹配为既不匹配，也不#mainOne是#mainFour的下一个兄弟#mainTwo。

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

由于#mainOne 前面 #mainTwo是 ，您不能将它与依赖于存在的规则匹配#mainTwo。

于 2012-11-06T13:34:14.707 回答