我有四个 div,我想在悬停时更改它们的宽度和高度,这样您悬停在上面的那个会展开,而所有其他 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 只会发生变化并弄乱其他所有内容。我究竟做错了什么? 谢谢。
最佳答案
CSS 只能 ( currently ) 定位 DOM 中之后出现的元素,因此 #mainTwo + #mainThree
可以工作,但是 #mainTwo + #mainOne
不能。
要定位之前的 sibling ,您必须将 sibling 包装在另一个父元素中,然后根据该父元素的悬停来设置之前的 sibling 的样式。
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%;
}
关于html - 为什么通用兄弟组合器并不总是有效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13252113/