html鼠标悬停切换内容,jQuery鼠标悬停内容动画切换效果

效果如下：

代码如下：

jQuery鼠标悬停内容动画切换效果

* {

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: 99;

}

.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 .serBox .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;

}

开心网

开心网营销

开心网

开心网营销

人人网

人人网营销

人人网

人人网营销

QQ空间

QQ空间营销

QQ空间

QQ空间营销

问答营销

问答投放 锁住潜在客户

问答营销

问答投放 锁住潜在客户

邮件推广

低成本 商机无限

邮件推广

低成本 商机无限

$(function() {

$(".serBox").hover(

function() {

$(this).children().stop(false, true);

$(this).children(".serBoxOn").fadeIn("slow");

$(this).children(".pic1").animate({

right: -110

}, 400);

$(this).children(".pic2").animate({

left: 41

}, 400);

$(this).children(".txt1").animate({

left: -240

}, 400);

$(this).children(".txt2").animate({

right: 0

}, 400);

},

function() {

$(this).children().stop(false, true);

$(this).children(".serBoxOn").fadeOut("slow");

$(this).children(".pic1").animate({

right: 41

}, 400);

$(this).children(".pic2").animate({

left: -110

}, 400);

$(this).children(".txt1").animate({

left: 0

}, 400);

$(this).children(".txt2").animate({

right: -240

}, 400);

}

);

});

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家