起始效果图:
每个板块处于展开状态
鼠标滑上去效果图
滑过的区域放大显示,文字超出则出现滚动条,其他区域处于折叠状态
代码实现
//CSS部分
<style type="text/css">
.wrap{
width:600px; height:500px; background:#f0f; margin:20px auto 0;}
.wrap>div{
width:25%; height:100%; float:left; overflow:hidden; font-size:14px;}
.wrap h3{font-size:20px;}
.wrap p,.wrap h3{padding:5px 15px;}
.spring{background:#0F6;}
.summer{background:#F36;}
.autumn{background:gold;}
.winter{background:#0FF;}
.wrap:hover>div{width:30px; color:rgba(0,0,0,0);}
.wrap:hover {}
.wrap>div:hover{width:510px; color:rgba(0,0,0,1); overflow:auto;}
</style>
<!--HTML部分-->
<body>
<div class="wrap">
<div class="spring">
<h3> Spring</h3>
<p>Spring begins in the northern hemisphere around the months of March, April, May, or as reckoned astronomically extending from the vernal equinox. As in summer, the axis