我试图通过在将鼠标悬停在另一个 div 上时更改其高度来产生口琴效果。
我的 HTML 看起来像这样:
<html><body>
<div class="section1"></div>
<div class="section2"></div>
<div class="section3"></div>
<div class="section4"></div>
</body></html>
每个部分的高度为 25%。 将鼠标悬停在 section1 上时，所有其他 div 的大小都应减小，而 section1 会扩展。这可以使用以下 CSS 轻松完成:
.section1 {
height: 40%;
}
.section1:hover ~ div:not(section1) {
height: 20%;
}
问题是 ~ 选择器只选择低于当前 div 的兄弟 div。所以如果我对 section2 使用相同的代码，只有 section3 和 section4 会受到影响。 Section1 的原始高度为 25%，因为它在当前 div 之上。
我可以只用 CSS 解决这个问题吗？
最佳答案
是的。在您的部分周围放置一个 wrapper ，并在将鼠标悬停在 wrapper 上时降低它们的高度。然后增加您悬停的部分的高度。
HTML 变为:
<div class='section-wrapper'>
<div class="section1"></div>
<div class="section2"></div>
<div class="section3"></div>
<div class="section4"></div>
</div>
相关CSS:
.section-wrapper {
height: 500px;
}
.section-wrapper div {
height: 25%;
outline: dotted 1px;
}
.section-wrapper:hover div {
height: 20%;
}
.section-wrapper div:hover {
height: 40%;
}
关于css - 选择当前 div 上方的同级 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12262613/