web前端入门到实战：鼠标滑过横向时间轴效果
鼠标滑过横向时间轴效果—全部代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class=container>
<ul>
<li>
1993
<div class=time>
<h1>1993</h1>
<p>内容介绍</p>
</div>
</li>
<li>
1999
<div class=time>
<h1>1999</h1>
<p>内容介绍</p>
</div>
</li>
<li>
2006
<div class=time>
<h1>2006</h1>
<p>内容介绍</p>
</div>
</li>
<li>
2019
<div class=time>
<h1>2019</h1>
<p>内容介绍</p>
</div>
</li>
</ul>
</div>
<script type="text/javascript" src=js/jquery1.10.2.js></script>
<script type="text/javascript">
$(function(){
$("ul li").hover(function(){
$(this).find(.time).slideDown(500);
},function(){
$(this).find(.time).slideUp(500);
})
})
</script>
</body>
</html>
编程工作第六个年头了，与大家分享一些学习方法，实战开发需要注意的细节。767-273-102 秋裙。从零基础开始怎么样学好前端。看看前辈们是如何在编程的世界里傲然前行！不停更新最新的教程和学习方法（web前端系统学习路线，详细的前端项目实战教学视频），有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入。我们会一起结伴同行
jQuery鼠标滑过横向时间轴效果—css部分：
*{margin:0;padding:0;}
ul{
list-style: none;
}
.container{
height: 162px;
background: url(../images/ico9.gif) repeat-x center;
}
.container li{
float:left;
background: url(../images/ico10.gif) no-repeat center top;
width:140px;
text-align: center;
margin-top: 65px;
position: relative;
padding-top:30px;
font-size:12px;
}
.time{
position: absolute;
width:100%;
left:0;
top:-20px;
display: none;
}
.time h1{
background: url(../images/ico11.gif) no-repeat center top;
height: 67px;
line-height: 67px;
font-size:16px;
}
.time p{
color:#999;
font-size:14px;
}
