效果图
css代码
1 #div_toop { 2 background-color:white; 3 padding: 10px; 4 border: 1px solid #eeeeee; 5 box-shadow: 5px 5px 5px #eeeeee; 6 } 7 8 #div_toop .title { 9 width: 70px; 10 display: inline-block; 11 text-align: right; 12 margin-right: 10px; 13 }
js代码
1 //鼠标位于 a标签上方时发生 mouseover 事件 2 $(".Price-profit").mouseover(function (e) { 3 4 var price = $(this).data("price"); 5 var profit = $(this).data("profit"); 6 var cost = $(this).data("cost"); 7 var num = $(this).data("num"); 8 9 var div_toop = ''; 10 div_toop += ' <div id="div_toop">'; 11 div_toop += '<p><span class="title">渠道售价：</span><span style="color: #21C179;">' + price + '(RMB)</span></p>'; 12 div_toop += '<p><span class="title">渠道售价：</span>按结算价加幅20%</p>'; 13 div_toop += '<p><span class="title">结算价：</span>' + cost + '(RMB)</p>'; 14 div_toop += '<p><span class="title">利润：</span>' + profit + '(RMB)</p>'; 15 div_toop += '<p><span class="title">剩余库存：</span><span style="color: deepskyblue;">' + num + '</span></p>'; 16 div_toop += '</div>'; 17 18 $("body").append(div_toop);//将要显示的内容添加到 新建 div标签中 并追加到 body 中 19 $("#div_toop") 20 .css({ 21 //设置 div 内容位置 22 "top": (e.pageY + 10) + "px", 23 "position": "absolute",//添加绝对位置 24 "left": (e.pageX + 20) + "px" 25 }).show("fast");// show(spe.ed,callback) speed: xian'shi'su'du 26 }).mouseout(function () { //鼠标指针从 a标签 上离开时 发生mouseout 事件 27 $("#div_toop").remove();//移除对象 28 }).mousemove(function (e) { //鼠标指针在 a标签 中移动时 发生mouseout 事件 29 $("#div_toop") 30 .css({ 31 //设置 div 内容位置 32 "top": (e.pageY + 10) + "px", 33 "position": "absolute",//添加绝对位置 34 "left": (e.pageX + 20) + "px" 35 }); 36 });