4

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

4

3 回答 3

4

是的。在您的部分周围放置一个包装纸，并在将鼠标悬停在包装纸上时降低它们的高度。然后增加您悬停的部分的高度。

演示

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%;
}
于 2012-09-04T11:33:49.157 回答
0

试试这个

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 ​</p> 

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

​
于 2012-09-04T11:43:49.167 回答
0

简单 将父容器添加到部分

<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%; }
于 2012-09-04T11:53:54.710 回答