Question

我正试图通过在悬停在另一个上方时改变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解决这个问题吗？

Answer 1

是。在你的部分周围放一个包装，并在包装上悬停时减小它们的高度。然后增加您正在悬停的一个部分的高度。

DEMO

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%;
}

Answer 2

尝试this

HTML

<html>
    <body>
        <div class="container">
            <div class="section1">1</div>
            <div class="section2">2</div>
            <div class="section3">3</div>
            <div class="section4">4</div>
        </div>
    </body>
</html>

CSS

.container:hover div {
    height:20px;
}
.container .section1,.container .section1:hover,
.container .section2,.container .section2:hover,
.container .section3,.container .section3:hover,
.container .section4,.container .section4:hover{
  height: 50px;
}

Answer 3

简单将父容器添加到部分

<div class="parent">
  <div class="section1">section1</div>
  <div class="section2">section2</div>
  <div class="section3">section3</div>
  <div class="section4">section4</div>
</div

将它们设为

.parent div{height: 25%; border:solid 1px #f00}
.parent:hover div{height: 20%; }
.parent div:hover {height: 40%; }

选择当前div之上的兄弟div

3 个答案: