好资源导航 » 文章资讯 » jQuery鼠标滑过横向时间轴样式(代码详解)

jQuery鼠标滑过横向时间轴样式(代码详解)

2023-08-10 00:15:05 285

每日分享效果，今天分享内容为：jQuery鼠标滑过横向时间轴样式

效果图：

HTML代码：

1999

内容介绍

2006

内容介绍

2019

内容介绍

$(function(){ $("ulli").hover(function(){ $(this).find('.time').slideDown(500); },function(){ $(this).find('.time').slideUp(500); }) }) `

CSS代码：

`*{margin:0;padding:0;}
ul{
list-style:none;
}
.container{
height:162px;
background:url('../images/ico9.gif')repeat-xcenter;
}
.containerli{
float:left;
background:url('../images/ico10.gif')no-repeatcentertop;
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;
}
.timeh1{
background:url('../images/ico11.gif')no-repeatcentertop;
height:67px;
line-height:67px;
font-size:16px;
}
.timep{
color:#999;
font-size:14px;
}`

效果素材和配套视频链接：https://www.3mooc.com/front/c...

总结

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

jQuery鼠标滑过横向时间轴样式(代码详解)

1993

1999

2006

2019

随机推荐

jQuery鼠标滑过横向时间轴样式(代码详解)

1993

1999

2006

2019

热门推荐

随机推荐