使用纯CSS创建水平可折叠手风琴

我有4个部门如下:

在悬停第一个元素时,它变为:

即我在使用'〜'选择器悬停第一个元素时改变了下一个元素的CSS.

/* hover on 1 */
#pillar1:hover {
width: 64%;
}
#pillar1:hover ~ #pillar2{
width: 12%;
}
#pillar1:hover ~ #pillar3{
width: 12%;
}
#pillar1:hover ~ #pillar4{
width: 12%;
}

但是在徘徊下一个部门时,使用代码

/* hover on 2 */
#pillar2:hover {
width: 64%;
}
#pillar2:hover ~ #pillar1{
width: 12%;
}
#pillar2:hover ~ #pillar3{
width: 12%;
}
#pillar2:hover ~ #pillar4{
width: 12%;
}

转型没有发生.
HTML

我怎样才能做到这一点？