jQuery中如何实现鼠标滑过横向时间轴样式

本文小编为大家详细介绍"jQuery中如何实现鼠标滑过横向时间轴样式"，内容详细，步骤清晰，细节处理妥当，希望这篇"jQuery中如何实现鼠标滑过横向时间轴样式"文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

效果图：

HTML代码：

`
  
    1993    
      
1993
      
内容介绍
    
  
  
    1999    
      
1999
      
内容介绍
    
  
  
    2006    
      
2006
      
内容介绍
    
  
    
    2019    
      
2019
      
内容介绍
    
  
  
`

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 h2{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中如何实现鼠标滑过横向时间轴样式"文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注行业资讯频道。