How to realize the switching effect of jQuery mouse over content animation
Editor to share with you how to achieve the jQuery mouse hover content animation switching effect, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!
The effect is as follows:
The code is as follows:
JQuery mouse over content animation toggle effect * {margin: 0; padding: 0; list-style: none;} img {border: 0; a {color: # fff; text-decoration: none;} .servicesBox {width: 1000px; height: 270px; margin: 0 auto; clear: both; line-height: 18px; color: # 999999; font-size: 12px;} .servicesBox .serBox {cursor: pointer Border: 1px solid # fff; display: inline; width: 198px; height: 250px; float: left; overflow: hidden; background-color: # f7f7f7; position: relative;} .servicesBox .serBoxOn {font-family: "Microsoft Yahei"; display: none; width: 320px; height: 270px; background: url (http://demo.lanrenzhijia.com/2014/pic0910/images/serboxon_bg.gif) repeat 0px 0px; position: absolute; left: 0px; top: 0px Z-index: 19;} .servicesBox .serBox .pic1 {width: 110px; height: 110px; text-align: center; position: absolute; top: 22px; right: 41px; z-index: 99;} .servicesBox .serBox .pic2 {width: 110px; height: 110px; text-align: center; position: absolute; top: 22px; left:-110px; z-index:-110px;} .servicesBox .serBox .txt1 {width: 198px; height: 100px Color: # 999999; position: absolute; top: 145px; left: 0px; z-index: 99;} .servicesBox .serBox .txt2 {width: 198px; height: 100px; color: # a9cf4f; position: absolute; top: 145px; right:-240px; z-index: 99;} .servicesBox .serBox span.tit {font-size: 16px; display: block; text-align: center;} .servicesBox .ser.txt1.tit {color: # 000000 Line-height: 30px;} .servicesBox .serBox .txt2.tit {color: # fff; line-height: 30px; font-family: "Microsoft Yahei";} .servicesBox .serBox p {padding: 0 10px; text-align: center;}
Renren Network
Renren marketing
Renren Network
Renren marketing
Question and answer marketing
Q & A lock potential customers
Question and answer marketing
Q & A lock potential customers
