Jquery hover鼠标经过时弹出div动态提示语

一、效果图

 

二、需求描述

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

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

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

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

三、实现思路

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

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

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

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

四、具体实现步骤

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

　　<div class="hoverdiv">
　　　　<div style="text-align: center; vertical-align: middle;"><label id="message" style="color: #000000;"></label></div>
　　</div>

　　//保存鼠标的位置

　　<input type="hidden" id="pagex" />

　　<input type="hidden" id="pagey" />

　　2、div样式　

　　<style type="text/css">
　　　　.blockdiv{
　　　　　　width:285px;
　　　　　　height:30px;
　　　　　　display:none;
　　　　　　left: 977px;
　　　　　　top: 300px;
　　　　　　position: absolute;
　　　　　　z-index:1002;
　　　　　　opacity:1;
　　　　　　background:#D6D6D6;
　　　　}
　　</style>

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

　　<table>
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th class="center">name</th>
　　　　　　　　<th>pass</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　#foreach(${item} in ${draftPage.result})
　　　　　　<tr class="hoverTag">
　　　　　　　　<td>
　　　　　　　　　　<label>
　　　　　　　　　　　　<input type="hidden" name="message" value="$!dateTool.format("yyyy-MM-dd HH:mm:ss", $!{item.tagTime})">

　　　　　　　　　　</label>
　　　　　　　　</td>
　　　　　　　　<td>$!{item.name}</td>
　　　　　　　　<td>$!{item.pass}</td>
　　　　　　</tr>
　　　　#end
　　　　</tbody
　　</table>

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

　　<script>
　　　　//获取鼠标的位置，并保存到页面隐藏域中
　　　　$(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("");
　　　　　　}
　　　　)
　　</script>