How to realize the style of mouse sliding over the horizontal timeline in jQuery
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.
