仿京东(我的商城)鼠标上去弹出层效果
引用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; }