以前大多数情况下，我们都是使用JavaScript或jQuery来实现手风琴效果的。事实上，我们还可以使用CSS3来实现，这种方式相对来说更为简单。

实现代码如下：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #box
        {
            width:300px;
            height:50px;
            overflow:hidden;
        }
        /*定义item公共样式*/
        .item
        {
            float:left;
            width:20%;
            height:100%;
            transition:all 0.5s;
        }
        /*定义item单独样式*/
        .item:nth-child(1) {width:40%;background-color: red;}
        .item:nth-child(2) {background-color: orange;}
        .item:nth-child(3) {background-color: yellow;}
        .item:nth-child(4) {background-color: green;}
        /*关键代码*/
        #box:hover div
        {
            width:20%;
        }
        #box div:hover
        {
            width:40%;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

在一开始，我们定义第1个子元素宽度为40%，其他3个子元素宽度为20%，总宽度刚好为100%。

/*关键代码*/
#box:hover div
{
    width:20%;
}
#box div:hover
{
    width:40%;
}

“#box:hover div{width:20%;}”

表示当鼠标经过父元素时，将每一个子元素的宽度定义为20%。既然鼠标经过父元素，那肯定会经过某一个子元素，“#box div:hover{width:40%;}”表示将鼠标经过的“当前子元素”的宽度定义为40%，这样就实现了手风琴效果。

上面这段代码是实现手风琴效果最关键的代码，也非常有技巧性，小伙伴们一定要琢磨清楚。