先看一下效果图吧
初始状态：
**大体思路：**首先设置初始的样式，让后当鼠标滑过任一栏目时，先将所有的栏目的宽度设置为30px，且字体大小为0（让文字不显示）；
当滑过某一栏目时，将该栏的宽度设置为510px，字体显示出来，然后用overflow-y: scroll;显示滚动条。
注意：这个样式的设置对每个栏目宽度计算有要求，如果宽度计算不当会出现闪屏；
本代码设置的四个栏目宽度各为150px，总的宽度位600px；
当鼠标滑过的时候，滑到的栏目为510px，其他3个栏目宽度为30*3=90px，这样加起来还是600px，这点是要保证的。
上代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
ul{
width: 600px;
height:300px;
overflow:hidden;
}
li{
width: 150px;
height: 300px;
font-size: 14px;
list-style: none;
float: left;
}
ul h1,ul p{
padding: 5px 10px;
}
ul:hover li{ //当鼠标滑过时，让所有的栏目得宽度都变为30px,并且字体不显示；
width: 30px;
font-size: 0px;
}
ul li:hover{ //设置滑过的栏目的详细设计
width: 510px;
font-size: 14px;
color: black;
overflow-y: scroll;
}
ul .one{ //定义初始状态每一块的背景颜色
background: #0F6;
}
ul .two{
background: red;
}
ul .three{
background: yellow;
}
ul .four{
background: pink;
}
</style>
</head>
<body>
<ul>
<li class="one">
<h1>Spring</h1>
<p>Spring
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 of the Earth is tilted toward the Sun and the length of daylight rapidly increases. The northern hemisphere begins to warm significantly causing new plant growth to "spring forth," giving the season its name. Snow begins to melt and streams swell with runoff and spring rains. Most flowering plants bloom this time of year, in a long succession sometimes beginning even when snow is still on the ground, and continuing into early summer. In normally snowless areas "spring" may begin as early as February during warmer years, with subtropical areas having very subtle differences, and tropical ones none at all. Subarctic areas may not experience "spring" at all until May or even June, or December in the outer Antarctic.</p>
<p>Severe weather most often occurs during the spring, when warm air begins to invade from lower latitudes while cold air is still pushing from the polar regions. Flooding is also most common in and near mountainous areas during this time of year because of snowmelt, many times accelerated by warm rains. In the United States, Tornado Alley is most active by far this time of year, especially since the Rocky Mountains prevent the surging hot and cold air masses from spreading eastward and instead force them directly at each other. Besides tornadoes, supercell thunderstorms can also produce dangerously large hail and very high winds, for which a severe thunderstorm warning or tornado warning is usually issued. Even more so than winter, the jet streams play an important role in severe weather in the springtime.</p>
</li>
<li class="two">
<h1>Spring</h1>
<p>Spring
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 of the Earth is tilted toward the Sun and the length of daylight rapidly increases. The northern hemisphere begins to warm significantly causing new plant growth to "spring forth," giving the season its name. Snow begins to melt and streams swell with runoff and spring rains. Most flowering plants bloom this time of year, in a long succession sometimes beginning even when snow is still on the ground, and continuing into early summer. In normally snowless areas "spring" may begin as early as February during warmer years, with subtropical areas having very subtle differences, and tropical ones none at all. Subarctic areas may not experience "spring" at all until May or even June, or December in the outer Antarctic.</p>
<p>
Severe weather most often occurs during the spring, when warm air begins to invade from lower latitudes while cold air is still pushing from the polar regions. Flooding is also most common in and near mountainous areas during this time of year because of snowmelt, many times accelerated by warm rains. In the United States, Tornado Alley is most active by far this time of year, especially since the Rocky Mountains prevent the surging hot and cold air masses from spreading eastward and instead force them directly at each other. Besides tornadoes, supercell thunderstorms can also produce dangerously large hail and very high winds, for which a severe thunderstorm warning or tornado warning is usually issued. Even more so than winter, the jet streams play an important role in severe weather in the springtime.</p>
</li>
<li class="three">
<h1>Spring</h1>
<p>Spring
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 of the Earth is tilted toward the Sun and the length of daylight rapidly increases. The northern hemisphere begins to warm significantly causing new plant growth to "spring forth," giving the season its name. Snow begins to melt and streams swell with runoff and spring rains. Most flowering plants bloom this time of year, in a long succession sometimes beginning even when snow is still on the ground, and continuing into early summer. In normally snowless areas "spring" may begin as early as February during warmer years, with subtropical areas having very subtle differences, and tropical ones none at all. Subarctic areas may not experience "spring" at all until May or even June, or December in the outer Antarctic.</p>
<p>
Severe weather most often occurs during the spring, when warm air begins to invade from lower latitudes while cold air is still pushing from the polar regions. Flooding is also most common in and near mountainous areas during this time of year because of snowmelt, many times accelerated by warm rains. In the United States, Tornado Alley is most active by far this time of year, especially since the Rocky Mountains prevent the surging hot and cold air masses from spreading eastward and instead force them directly at each other. Besides tornadoes, supercell thunderstorms can also produce dangerously large hail and very high winds, for which a severe thunderstorm warning or tornado warning is usually issued. Even more so than winter, the jet streams play an important role in severe weather in the springtime.</p>
</li>
<li class="four">
<h1>Spring</h1>
<p>Spring
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 of the Earth is tilted toward the Sun and the length of daylight rapidly increases. The northern hemisphere begins to warm significantly causing new plant growth to "spring forth," giving the season its name. Snow begins to melt and streams swell with runoff and spring rains. Most flowering plants bloom this time of year, in a long succession sometimes beginning even when snow is still on the ground, and continuing into early summer. In normally snowless areas "spring" may begin as early as February during warmer years, with subtropical areas having very subtle differences, and tropical ones none at all. Subarctic areas may not experience "spring" at all until May or even June, or December in the outer Antarctic.</p>
<p>
Severe weather most often occurs during the spring, when warm air begins to invade from lower latitudes while cold air is still pushing from the polar regions. Flooding is also most common in and near mountainous areas during this time of year because of snowmelt, many times accelerated by warm rains. In the United States, Tornado Alley is most active by far this time of year, especially since the Rocky Mountains prevent the surging hot and cold air masses from spreading eastward and instead force them directly at each other. Besides tornadoes, supercell thunderstorms can also produce dangerously large hail and very high winds, for which a severe thunderstorm warning or tornado warning is usually issued. Even more so than winter, the jet streams play an important role in severe weather in the springtime.</p>
</li>
</ul>
</body>
</html>`
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
