效果展示

请添加图片描述

要求

现要求使用CSS实现如下的页面效果：

列表初始状态仅显示第一个条目内容；
鼠标移动到列表区域后将自动展开内部条目；
鼠标移出该区域后，列表自动回收到初始状态；
要求平滑地实现列表展开与回收的动态效果；

思路分析

猜想

?首先我们肯定需要用到无序列表，其次还需要给列表每一个单元设置相同的宽、高，初始状态列表第一项默认处于显示状态，除第一项外均隐藏(overflow:hidden;)，转换时间设为0.5s(transition:0.5s;)，当鼠标经过时，打开显示(overflow:visible;)高度增加到所有列表高度之和的数值，过渡时间依旧0.5s，到这里我们就动手去做实现了。

猜想出错

?当你按着这个思路敲下去后，去观察效果却发现不对劲，列表收回时的效果确实正确实现了，但是展开的时候却是直接展开了，没有过渡效果。
?这是因为我们在设置过渡(transition)时没有制定过渡的效果，一方面我们用overflow:visible;直接让列表显示到全部的高度了，另一方面我们又使用了transition过渡，这两者分开使用时是会产生矛盾的，因此只能看到一个效果，不能同时实现。

解决办法

?实际上transition的过渡时我们最好把需要过渡的属性标明，这样不容易出错。
?所以在这里我们有两种解决办法，第一种就是删去overflow属性，并在hover里transition指定height；另一种办法是删去transition属性，在overflow里指定时间，这两种最终所能达到的效果是相同的。
?在这里我们采取的是第二种解决办法。

代码

?经过调试后，我们最终实现了所要达到的效果，具体代码如下。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="csdn.css">
    <title>Document</title>
</head>
<body>
    <div class="box1">
        <div class="box_1_1">1</div>
        <div class="box_1_1">2</div>
        <div class="box_1_1">3</div>
        <div class="box_1_1">4</div>
    </div>
</body>
</html>

CSS代码

*{
    padding: 0;
    margin: 0;
}
.box1{
    height: 30px;
    width: 102px;
    background-color: pink;
    font-size: 28px;
    line-height: 30px;
    text-align: center;
    overflow: hidden;
    transition: 0.5s;
}
.box1:hover{
    height: 120px;
    overflow: visible 0.5s;
    /* transition: height 0.5s; 第一种解决办法*/
}
.box_1_1{
    width: 100px;
    height: 28px;
    line-height: 28px;
    border: 1px solid;
}