jQuery选项卡鼠标经过图片遮罩显示二维码代码



120 477 160



特效描述:选项卡鼠标经过 图片遮罩显示 显示二维码,jQuery选项卡+鼠标经过图片遮罩层显示和二维码

代码结构

1. 引入CSS

<link type="text/css" rel="stylesheet" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>

3. HTML代码

<div class="company_con" >
	<ul id="companyUl">
		<li class="selected"><a href="javascript:void(0);">B2B案例</a></li>
		<li><a href="javascript:void(0);">B2C案例</a></li>
	</ul>
	<div id="companyList">
		<div class="company_b2b clearfix">
			<dl class="dl_first">
				<dt class="company_img"><img src="images/B2Blist01.jpg" alt="无锡春秋旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_trip12301.jpg" /></dt>
				<dd>无锡春秋国旅</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Blist02.jpg" alt="环球风情旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_chujing114.jpg" /></dt>
				<dd>环球风情</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Blist03.jpg" alt="浙江华夏旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_huaxialvxing.jpg" /></dt>
				<dd>浙江华夏国旅</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Blist04.jpg" alt="同旅网"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_tonglvw.jpg" /></dt>
				<dd>人民国旅(同旅网)</dd>
			</dl>
			<dl  class="dl_first">
				<dt class="company_img"><img src="images/B2Blist05.jpg" alt="北京青年旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_byts.jpg" /></dt>
				<dd>北京青年旅行社</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Blist06.jpg" alt="绍兴海外旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_hw517.jpg" /></dt>
				<dd>绍兴海外国际旅行社</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Blist07.jpg" alt="南瓜假期"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_cx766.jpg" /></dt>
				<dd>慈溪光大旅行社(南瓜假期)</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Blist08.jpg" alt="旅游一站式"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_ly124.jpg" /></dt>
				<dd>旅游一站式</dd>
			</dl>
			<dl class="dl_first">
				<dt class="company_img"><img src="images/B2Blist09.jpg" alt="我爱旅游网"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_5i61.jpg" /></dt>
				<dd>我爱旅游网</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Blist10.jpg" alt="嘉兴米兰"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_jxmlly.jpg" /></dt>
				<dd>妙途旅游(嘉兴米兰)</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Blist11.jpg" alt="布哥价优站"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_jiayts.jpg" /></dt>
				<dd>布哥价优站</dd>
			</dl>
		</div>
		<div class="company_b2b company_b2c hid">
			<dl class="dl_first">
				<dt class="company_img"><img src="images/B2Clist01.jpg" alt="无锡春秋旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_otchz.jpg" /></dt>
				<dd>杭州海外旅游</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Clist02.jpg" alt="环球风情旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_ly.57676.jpg" /></dt>
				<dd>浙江运通旅游</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Clist03.jpg" alt="浙江华夏旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_tzszbb.jpg" /></dt>
				<dd>台州神州国际旅行社</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Clist04.jpg" alt="同旅网"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_0575ly.jpg" /></dt>
				<dd>绍兴市四海旅游</dd>
			</dl>
			<dl class="dl_first">
				<dt class="company_img"><img src="images/B2Clist05.jpg" alt="无锡春秋旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_yanjiaolvyou.jpg" /></dt>
				<dd>中国铁道旅游燕郊分社</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Clist06.jpg" alt="环球风情旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_sxkxgl.jpg" /></dt>
				<dd>凯旋国旅</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Clist07.jpg" alt="浙江华夏旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_guoxinly.jpg" /></dt>
				<dd>山东国信旅游</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Clist08.jpg" alt="同旅网"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_ctszj.jpg" /></dt>
				<dd>镇江中旅</dd>
			</dl>
			<dl class="dl_first">
				<dt class="company_img"><img src="images/B2Clist09.jpg" alt="无锡春秋旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_jrglvip.jpg" /></dt>
				<dd>嘉兴市假日国际旅行社</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Clist10.jpg" alt="艺美旅游网(北京阿里郎)"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_emtrip.jpg" /></dt>
				<dd>艺美旅游网(北京阿里郎)</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Clist11.jpg" alt="吉林市中国国际旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_cits.jpg" /></dt>
				<dd>吉林市中国国际旅行社</dd>
			</dl>
			<dl>
				<dt class="company_img"><img src="images/B2Clist12.jpg" alt="大连东方假日国际旅行社"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_dldfjr.jpg" /></dt>
				<dd>东方假日国旅</dd>
			</dl>
			<dl class="dl_first">
				<dt class="company_img"><img src="images/B2Clist13.jpg" alt="跟我游天下"/></dt>
				<dt class="hid"></dt>
				<dt class="ererima_img hid"><img src="images/erweima_114lvxing.jpg" /></dt>
				<dd>跟我游</dd>
			</dl>
		</div>
	</div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动星星打分 其他 二维码 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到