Attempting to create a harmonica effect by adjusting the height of divs upon hovering over another.
The HTML is structured as follows:
<html><body>
<div class="section1"></div>
<div class="section2"></div>
<div class="section3"></div>
<div class="section4"></div>
</body></html>
Each section has a height set at 25%. When hovering over section1, all other divs should decrease in size while section1 expands. Achieved through the following CSS:
.section1 {
height: 40%;
}
.section1:hover ~ div:not(section1) {
height: 20%;
}
An issue arises with the ~ selector only affecting sibling divs below the current one. When applying the same code for section2, sections 3 and 4 are altered but section1 remains unchanged due to its position above.
Is it feasible to overcome this obstacle using only CSS?