Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "how to achieve the mouse over the horizontal timeline style in jQuery", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to achieve mouse skimming over the horizontal timeline style in jQuery" can help you solve your doubts.

Effect picture:

HTML Code:

`1993 1993

Content introduction

1999 1999

Content introduction

2006 2006

Content introduction

2019 2019

Content introduction

$(function () {$("ul li") .hover (function () {$(this) .find ('.time') .slideDown;}, function () {$(this) .find ('.time'). SlideUp (500);})}) `

CSS Code:

`* {margin:0;padding:0;} ul {list-style: none;} .container {height: 162pxposition 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: 65pxpositional 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: 67pxlineripple height: 67pxash Fontmuri sizechrome 16px;} .time p {color:#999;font-size:14px } 'read here, this article "how to mouse over the horizontal timeline style in jQuery" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it before you can understand it. If you want to learn more about related articles, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.