效果圖
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 });