商标微信小程序_jQuery鼠标滑过横向时间轴样式

jQuery鼠标滑过横向时间轴样式(代码详解)       这篇文章主要介绍了jQuery鼠标滑过横向时间轴样式，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

效果图：

 

HTML代码：

` !DOCTYPE html 
 html 
 head 
 title /title 
 link rel="stylesheet" type="text/css" href="css/style.css" 
 /head 
 body 
 div 
 1993
 div 
 h1 1993 /h1 
 p 内容介绍 /p 
 /div 
 /li 
 1999
 div 
 h1 1999 /h1 
 p 内容介绍 /p 
 /div 
 /li 
 2006
 div 
 h1 2006 /h1 
 p 内容介绍 /p 
 /div 
 /li 
 2019
 div 
 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 `

CSS代码：

`*{margin:0;padding:0;}
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;
}`

效果素材和配套视频链接： ...

总结

以上所述是小编给大家介绍的jQuery鼠标滑过横向时间轴样式,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！