jQuery鼠标经过触发标签切换背景代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标经过触发标签切换背景代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery鼠标经过触发标签切换背景代码 </title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>
<div class="bodyCon07">
	<div class="teacher">
		<div class="teacherPic">
			<div class="content" id="sirendingzhi1">
<!--				<img src="images/teacher011.jpg" width="200" height="325" />-->
				<div class="txt">
					<h3>新疆</h3>
					<h4>草场丰腴、林木葱郁，有着“塞外江南”的美称</h4>
					<p>发团日期：7-10月<br>
					   参考价格：5280元<br>
					   摄影器材: 单反 广角 中长焦 三脚架等</p>
				</div>
			</div>
			<div class="content" id="sirendingzhi2">
				
				<div class="txt">
					<h3>云南</h3>
					<h4>东川红土地的炫彩、高原明珠——抚仙湖的柔美</h4>
					<p>发团日期：7-11月<br>
					   参考价格：2780元<br>
					   摄影器材: 单反 广角 中长焦 三脚架等</p>
				</div>
			</div>
			<div class="content" id="sirendingzhi3">

				<div class="txt">
					<a href="#" ><h3>贵州</h3></a>
					<h4>西江千户苗寨 以美丽回答一切</h4>
					<p>发团日期：7-12月<br>
					   参考价格：2680元<br>
					   摄影器材: 单反 广角 中长焦 三脚架等</p>
				</div>
			</div>
			<div class="content" id="sirendingzhi4">
	
				<div class="txt">
					<h3>色达</h3>
					<h4>地球上最后的一片净土，心灵净化之旅</h4>
					<p>发团日期：7-10月<br>
					   参考价格：3900元<br>
					   摄影器材: 单反 广角 中长焦 三脚架等</p>
				</div>
			</div>
			<div class="content" id="sirendingzhi5">

				<div class="txt">
					<h3>斯里兰卡</h3>
					<h4>印度洋上的一滴眼泪！</h4>
					<p>发团日期：6-12月<br>
					   参考价格：1250美金<br>
					   摄影器材: 单反 广角 中长焦 三脚架等</p>
				</div>
			</div>
		</div>
		<div style="clear:both;"></div>
	</div>
</div>
 <!--java开始-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	$(".content") .hover(function(){
			$(this) .children(".txt").stop() .animate({height:"360px"},200);
            $(this) .parent(".teacherPic") .css({"background":"url(images/"+($(this).attr('id'))+".jpg) no-repeat","-webkit-transition":"all 0.8s ease 0.2s","transition":"all 0.8s ease 0.2s"});
/*			$(this) .parent(".teacherPic") .css("background","url(images/"+($(this).attr('id'))+".jpg) no-repeat");*/
			$(this) .find(".txt h3").stop() .animate({paddingTop:"130"},550);
			$(this) .find(".txt p").stop() .show();
	},function(){
			$(this) .children(".txt").stop() .animate({height:"100px"},200);
			$(this) .find(".txt h3").stop().animate({paddingTop:"0px"},550);
			$(this) .find(".txt p").stop() .hide();
		})
</script>
<!--java结束-->
</body>
</html>

CSS代码(style.css):

@charset "utf-8";/**基本格式开始***************/
.bodyCon07{width:1000px;overflow:hidden;margin:0 auto;}
.bodyCon07 .teacher{width:1000px;height:325px;position:relative;margin:0 auto;overflow:hidden;}
.bodyCon07 .teacher .teacherPic{width:1000px;height:325px;position:absolute;background:url(../images/sirendingzhi1.jpg) no-repeat;}
.bodyCon07 .teacher .teacherPic .content{width:200px;height:325px;float:left;position:relative;overflow:hidden;}
.bodyCon07 .teacher .teacherPic .content .txt{width:176px;height:100px;background:rgba(18,21,44,0.5);position:absolute;left:0px;bottom:0px;padding:0 12px;border-top:2px solid #FFE000;font-family:微软雅黑;font-size:12px;}
.bodyCon07 .teacher .teacherPic .content .txt h3{color:#FFC200;font-size:24px;font-weight:100;margin:10px 0 6px 0;}
.bodyCon07 .teacher .teacherPic h4{color:#fff;font-size:12px;font-weight:100;height:40px;}
.bodyCon07 .teacher .teacherPic .content .txt p{color:#fff;margin-top:15px;padding-top:5px;border-top:1px solid #FFC200;font-family:微软雅黑;}

附件:下载该文件资源,减少时间成本(增值服务)