一、overFlow意义
overflow:容器(满的)溢出,它有以下取值:
1、visible(默认)溢出部分可见
2、hidden溢出部分隐藏
3、auto适当加入滚动条(当父元素高度固定,内容溢出,设置overflow: auto会出现滚动条)
overflow-x和overflow-y也有这三种取值,分别代表水平或者垂直方向溢出的处理
二、实现案例
1、默认展示
2、当鼠标悬浮在某一卷时,其他的内容隐藏,该卷展开,效果如下:
3、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>金刚经</title>
<style type="text/css">
#{ margin: 0px; padding: 0px;}
section{ width: 800px;height: 460px;margin: auto;}
article{ float: left;width:200px;height: 460px;overflow: hidden;}
h3{ font-size: 16px;font-weight: bold;margin: 10px 50px;}
p{ margin: 10px 50px;}
.chapter_1 { background-color: #A3A3A3;}
.chapter_2 { background-color: #81559d;}
.chapter_3 { background-color: #54709d;}
.chapter_4 { background-color: #4f9d89;}
section:hover>article{
overflow: hidden;
width: 50px;
}
section>article:hover {
width: 650px;
}
</style>
</head>
<body>
<section>
<article class="chapter_1">
<h3>金刚经第一卷</h3>
<p>如是我闻,一时,佛在舍卫国祗树给孤独园,与大比丘众千二百五十人俱。尔时,世尊食时,著衣持钵,
入舍卫大城乞食。于其城中,次第乞已,还至本处。饭食讫,收衣钵,洗足已,敷座而坐。</p>
</article>
<article class="chapter_2">
<h3>金刚经第二卷</h3>
<p>如是我闻,一时,佛在舍卫国祗树给孤独园,与大比丘众千二百五十人俱。尔时,世尊食时,著衣持钵,
入舍卫大城乞食。于其城中,次第乞已,还至本处。饭食讫,收衣钵,洗足已,敷座而坐。</p>
</article>
<article class="chapter_3">
<h3>金刚经第三卷</h3>
<p>如是我闻,一时,佛在舍卫国祗树给孤独园,与大比丘众千二百五十人俱。尔时,世尊食时,著衣持钵,
入舍卫大城乞食。于其城中,次第乞已,还至本处。饭食讫,收衣钵,洗足已,敷座而坐。</p>
</article>
<article class="chapter_4">
<h3>金刚经第四卷</h3>
<p>如是我闻,一时,佛在舍卫国祗树给孤独园,与大比丘众千二百五十人俱。尔时,世尊食时,著衣持钵,
入舍卫大城乞食。于其城中,次第乞已,还至本处。饭食讫,收衣钵,洗足已,敷座而坐。</p>
</article>
</section>
</body>
</html>