引用jquery-1.9.1.min.js文件；
效果：
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>鼠标上去弹出层</title>
<link href="index.css" rel="stylesheet" />
<script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(function(){
$(".tb-content-myline dl").hover(function(){
$(this).addClass("hover");
$(this).find("dd:eq(1)").show();
},function(){
$(this).removeClass("hover");
$(this).find("dd:eq(1)").hide();
});
});
</script>
</head>
<body>
<!--我的商城-->
<div style="width:300px; margin:0px auto;">
<div class="tb-content-myline">
<dl>
<dt class="ld"><s></s><a href="#">我的商城</a><b></b></dt>
<dd>
<div class="loading-style1"><b></b>加载中，请稍候...</div>
</dd>
<dd>
<div class="prompt">
<span class="fl">
<strong>lu.wang</strong>
</span>
<span class="fr">
<a href="#">去我的商城首页 ></a>
</span>
</div>
<div id="jduc-orderlist"></div>
<div class="uclist">
<ul class="fore1 fl">
<li>
<a href="#" target="_blank">
待处理订单
<span id="num-unfinishedorder">
<font style="color:#ccc">
(0)
</font>
</span>
</a>
</li>
<li>
<a href="#" target="_blank">
咨询回复
<span id="num-consultation">
<font style="color:#ccc">
(0)
</font>
</span>
</a>
</li>
<li>
<a href="#" target="_blank">
降价商品
<span id="num-reduction">
</span>
</a>
</li>
<li>
<a href="#" target="_blank">
返修退换货
</a>
</li>
<li>
<a href="#" target="_blank">
优惠券
<span id="num-ticket">
<font style="color:#ccc">
(0)
</font>
</span>
</a>
</li>
</ul>
<ul class="fore2 fl">
<li>
<a href="#" target="_blank">
我的关注>
</a>
</li>
<li>
<a href="#" target="_blank">
我的京豆>
</a>
</li>
<li>
<a href="#" target="_blank">
我的理财>
</a>
</li>
</ul>
</div>
<div class="viewlist">
<div class="smt" style="cursor:default;">
<h4>最近浏览的商品：</h4>
<div style="float:right; padding-right:9px;">
<a href="" target="_blank" style="border:0;color:#005EA7;">查看浏览历史></a>
</div>
</div>
<div id="jduc-viewlist" class="smc">
<ul class="lh">
<li>
<a title="周生生 黄金足金大眼猴(代代封侯)耳环 77885e 1.91克" target="_blank" href="#">
<img width="50" height="50" alt="周生生 黄金足金大眼猴(代代封侯)耳环 77885e 1.91克" src="http://img12.360buyimg.com/n5/jfs/t178/88/577278497/242436/79fb3d12/53917747Nc75549f5.jpg" />
</a>
</li>
<li>
<a title="周生生 黄金足金大眼猴(代代封侯)耳环 77885e 1.91克" target="_blank" href="#">
<img width="50" height="50" alt="周生生 黄金足金大眼猴(代代封侯)耳环 77885e 1.91克" src="http://img12.360buyimg.com/n5/jfs/t178/88/577278497/242436/79fb3d12/53917747Nc75549f5.jpg" />
</a>
</li>
<li>
<a title="周生生 黄金足金大眼猴(代代封侯)耳环 77885e 1.91克" target="_blank" href="#">
<img width="50" height="50" alt="周生生 黄金足金大眼猴(代代封侯)耳环 77885e 1.91克" src="http://img12.360buyimg.com/n5/jfs/t178/88/577278497/242436/79fb3d12/53917747Nc75549f5.jpg" />
</a>
</li>
<li>
<a title="周生生 黄金足金大眼猴(代代封侯)耳环 77885e 1.91克" target="_blank" href="#">
<img width="50" height="50" alt="周生生 黄金足金大眼猴(代代封侯)耳环 77885e 1.91克" src="http://img12.360buyimg.com/n5/jfs/t178/88/577278497/242436/79fb3d12/53917747Nc75549f5.jpg" />
</a>
</li>
<li>
<a title="周生生 黄金足金大眼猴(代代封侯)耳环 77885e 1.91克" target="_blank" href="#">
<img width="50" height="50" alt="周生生 黄金足金大眼猴(代代封侯)耳环 77885e 1.91克" src="http://img12.360buyimg.com/n5/jfs/t178/88/577278497/242436/79fb3d12/53917747Nc75549f5.jpg" />
</a>
</li>
</ul>
</div>
</div>
</dd>
</dl>
</div>
</div>
</body>
</html>
css内容：
@charset "utf-8";
/* CSS Document */
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, big, cite, code, del, em, font, img, ins, small, strong, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
margin:0;
padding:0;
}
body
{
width:100%;
font-family:"宋体";
font-size:12px;
color:#000;
background-color:#fff;
}
ul{list-style:outside none none;}
a{
text-decoration:none;
cursor:pointer;
}
img
{
border:0px;
}
/**************我的商城、购物车结算、对比**************/
.tb-content-myline dt a,.tb-content-contras dt a{
color:#666;
}
.tb-content-myline dt,.tb-content-myline dl.hover dt{
background-image:url(boo.png);
background-repeat:no-repeat;
}
.tb-content-myline{
float:left;
position:relative;
width:106px;
height:30px;
margin:9px 10px 0px 30px;
}
.tb-content-myline dt{
position:absolute;
width:50px;
height:30px;
padding:0 24px 0 30px;
border:1px solid #EFEFEF;
background-position:-116px -24px;
background-color:#F7F7F7;
text-align:center;
line-height:27px;
cursor:pointer;
*line-height:30px;
}
.tb-content-myline dt b{
top:12px;
right:8px;
width:0px;
height:0px;
border-style:solid dashed dashed;
border-width:5px;
border-color:#ccc transparent transparent;
overflow:hidden;
position:absolute;
}
.tb-content-myline dl.hover dt{
height:32px;
border-width:1px 1px 0px;
border-style:solid solid none;
border-color:#e3e3e3 #e3e3e3 #fff;
-moz-border-top-colors:none;
-moz-border-right-colors:none;
-moz-border-bottom-colors:none;
-moz-border-left-colors:none;
border-image:none;
background-position:-115px -53px;
background-color:#fff;
z-index:11;
}
.tb-content-myline dl.hover dt b{
top:7px;
border-style:dashed dashed solid;
border-color:transparent transparent #ccc;
}
.tb-content-myline dd{
display:none;
position:absolute;
top:32px;
right:0px;
width:310px;
border:1px solid #e3e3e3;
background:none repeat scroll 0% 0% #fff;
z-index:10;
}
.tb-content-myline .prompt{
padding:6px 6px 6px 9px;
border-bottom:1px solid #eee;
line-height:25px;
overflow:hidden;
}
.fl{ float:left;}
.fr{ float:right;}
.tb-content-myline .prompt a,.tb-content-myline .orderlist a{color:#005ea7;}
.tb-content-myline .uclist{
width:310px;
margin:5px 0px;
overflow:hidden;
}
.tb-content-myline .uclist ul{ width:134px;padding:0px 10px;}
.tb-content-myline .uclist .fore1{ border-right:1px solid #f1f1f1;}
.tb-content-myline .uclist .fore2{ }
.tb-content-myline .uclist a:link,.tb-content-myline .uclist a:visited{
display:block;
height:18px;
overflow:hidden;
padding:5px;
text-decoration:none;
color:#005ea7;
}
.tb-content-myline .uclist a:hover,.tb-content-myline .uclist a:active{
background:none repeat scroll 0% 0% #f5f5f5;
color:#e4393c;
}
.tb-content-myline .viewlist{
width:305px;
padding:8px 0px 8px 5px;
background:none repeat scroll 0% 0% #f3f3f3;
}
.smc ,.smt{ overflow:hidden;}
.tb-content-myline .viewlist .smt h4{
float:left;
padding-left:4px;
font-weight:400;
font-size:12px;
}
.tb-content-myline .viewlist ul{ overflow:hidden;}
.tb-content-myline .viewlist li{
width:52px;
padding:4px;
line-height:0;
font-size:0px;
float:left;
}
.tb-content-myline .viewlist a:link,.tb-content-myline .viewlist a:visited{
display:block;
border:1px solid #ddd;
}
时间： 2024-11-08 09:49:33