一、效果图

二、需求描述

1、鼠标经过table每一行时，弹出div动态提示语；

2、div弹出层的位置随鼠标位置的变化而变化；

3、鼠标离开table或获取的动态提示语为空时，div弹出层消失。

下面我做了一个简单的实现，第一次在博客园写随笔记录下来。

三、实现思路

1、设计一个div弹出层的样式。该div在页面只有一个，哪里需要就往哪里搬。

2、获取并保存鼠标的位置，定位div弹出层的位置。

3、获取table每行隐藏的提示语，设置到div中区显示。

4、使用鼠标经过和离开事件，对div进行控制。

四、具体实现步骤

1、定义div的HTML代码如下：

//保存鼠标的位置

2、div样式

.blockdiv{

width:285px;

height:30px;

display:none;

left: 977px;

top: 300px;

position: absolute;

z-index:1002;

opacity:1;

background:#D6D6D6;

}

3、需要鼠标经过table每一行，弹出div，table设计如下：

namepass

#foreach(${item} in ${draftPage.result})

$!{item.name}$!{item.pass}

#end

4、鼠标经过和离开事件处理如下：

//获取鼠标的位置，并保存到页面隐藏域中

$(document).mousemove(function (e) {

document.getElementById("pagex").value = e.pageX;//pageX() 属性是鼠标指针的位置，相对于文档的左边缘。

document.getElementById("pagey").value = e.pageY;//pageY() 属性是鼠标指针的位置，相对于文档的上边缘。

});

var MouseEvent = function(e){

this.x = e.pageX;

this.y = e.pageY;

}

var Mouse = function(e){

var kdheight = jQuery(document).scrollTop();

mouse = new MouseEvent(e);

leftpx = mouse.x+15;

toppx = mouse.y-10;

}

$(".hoverTag").hover(

function (e) {//鼠标经过时业务处理

Mouse(e);

var message = e.currentTarget.firstElementChild.firstElementChild.lastElementChild.defaultValue;

if(message == null || message == '' || message == undefined){

$(".hoverdiv").css({

"display": "none",

});

$("#message").html("");

}else{

$(".hoverdiv").css({

"display": "block",

"left": leftpx,

"top": toppx,

});

$("#message").html(message);

}

},

function () {//鼠标离开时业务处理

$(".hoverdiv").css({

"display": "none",

});

$("#message").html("");

}

)