jQuery实现悬浮显示效果

1.新建一个hmtl文件，一个CSS文件，一个JS文件

2.显示之前的图片

3.显示之后的图片

4.html代码

<div class="nav w1200">
			<a href="#" class="sp-kj" kj>商品分类</a>
			<div class="kj-show2">
				<div class="kj-info1" mg="shiping">
					<dl class="kj-dl1">
						<dt><a href="#">食品/饮料/酒水</a></dt>
						<dd>零食/糖果/巧克力、零食/糖果/巧克力、零食/糖果/巧克力、零食/糖果/巧克力、零食/糖果/巧克力</dd>
					</dl>
					<div class="kj-if-show" mg2="shiping" style="display: none;">
						<dl>
							<dt>零食/糖果/巧克力</dt>
							<dd>
								<a href="#">膨化食品</a>
								<a href="#">膨化食品</a>
								<a href="#">膨化食品</a>
								<a href="#">膨化食品</a>
							</dd>
							<div style="clear: both;"></div>
						</dl>
						<dl>
							<dt>零食/糖果/巧克力</dt>
							<dd>
								<a href="#">膨化食品</a>
								<a href="#">膨化食品</a>
								<a href="#">膨化食品</a>
								<a href="#">膨化食品</a>
								<a href="#">膨化食品</a>
								<a href="#">膨化食品</a>
								<a href="#">膨化食品</a>
								<a href="#">膨化食品</a>
							</dd>
							<div style="clear: both;"></div>
						</dl>
						<dl>
							<dt>零食/糖果/巧克力</dt>
							<dd>
								<a href="#">膨化食品</a>
								<a href="#">膨化食品</a>
								<a href="#">膨化食品</a>
								<a href="#">膨化食品</a>
								<a href="#">膨化食品</a>
								<a href="#">膨化食品</a>
								<a href="#">膨化食品</a>
								<a href="#">膨化食品</a>
							</dd>
							<div style="clear: both;"></div>
						</dl>
						<dl>
							<dt>零食/糖果/巧克力</dt>
							<dd>
								<a href="#">膨化食品</a>
								<a href="#">膨化食品</a>
								<a href="#">膨化食品</a>
								<a href="#">膨化食品</a>
							</dd>
							<div style="clear: both;"></div>
						</dl>
					</div>
				</div><!-- kj-info1 结束 -->
</div>

5.css代码

.nav{
	position: relative;
}

.nav .sp-kj{
	width: 267px;
	height: 47px;
	line-height: 47px;
	font-size: 16px;
	color: #fff;
	float: left;
	background: #F19F0B url(../img/sp-kj-bg.jpg) no-repeat 6px center;
	padding-left: 35px;
	position: relative;
}

.nav .kj-show2{
	width: 302px;
	height: 560px;
	background-color: #2b2b2b;
	z-index: 2;
	position: absolute;
	top: 47px;
	left: 0px;
}

.nav .kj-show2 .hover-show-bg{
	background-color: #FFFFFF;
}

.nav .kj-show2 .hover-show-bg .kj-dl1 dt{
	background: url(../img/kj-show-dt-tu1-show.gif) no-repeat left center;
}

.nav .kj-show2 .kj-info1{
	border-top: 1px solid #343434;
	border-bottom: 1px solid #000;
}

.nav .kj-show2 .kj-dl1{
	padding: 5px 10px 5px;
}

.nav .kj-show2 .kj-dl1 dt{
	padding-left: 20px;
	background: url(../img/kj-show-dt-tu1.gif) no-repeat left center;
	margin-bottom: 4px;
}

.nav .kj-show2 .kj-dl1 dt a{
	font-size: 14px;
	font-weight: bold;
	color: #fff;
}

.nav .kj-show2 .kj-dl1 dd{
	line-height: 30px;
	font-size: 14px;
	color: #fff;
	padding-left: 20px;
}

.nav .kj-show2 .hover-show-bg .kj-dl1 dt a{
	color: #2B2B2B;
}

.nav .kj-show2 .hover-show-bg .kj-dl1 dd{
	color:#2B2B2B;
}

.nav .kj-show2 .kj-if-show{
	width: 680px;
	min-height: 558px;
	border: 1px solid #dbdbdb;
	border-left: none;
	background-color: #FFFFFF;
	position: absolute;
	top: 0;
	left: 302px;
}

.nav .kj-show2 .kj-if-show dl{
	margin: 0px 11px;
	padding: 15px 8px;
	border-bottom: 1px solid #d5d5d5;
}

.nav .kj-show2 .kj-if-show dl dt{
	width: 150px;
	font-size: 14px;
	color: #000;
	font-weight: bold;
	float: left;
}

.nav .kj-show2 .kj-if-show dl dd{
	float: left;
	width: 490px;
}

.nav .kj-show2 .kj-if-show dl dd a{
	display: inline-block;
	font-size: 14px;
	color: #000;
	margin-right: 30px;
}

.nav .kj-show2 .kj-if-show dl dd a:hover{
	color:#F09E0B;
}

.nav ul{
	float: left;
}

.nav li{
	float: left;
	width: 112px;
	height: 47px;
	line-height: 47px;
	text-align: center;
}

.nav li a{
	font-size: 15px;
	color: #1f1f1f;
}

.nav li a:hover{
	color:#F09E0B;
}

6.jQuery代码

	$('[mg]').hover(function(){
		$(this).addClass('hover-show-bg');
		var a1=$(this).attr('mg');
		$('[mg2='+a1+']').show();
	},function(){
		$(this).removeClass('hover-show-bg');
		var a1=$(this).attr('mg');
		$('[mg2='+a1+']').hide();
	});