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

一、效果图

 

二、需求描述

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

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

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

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

三、实现思路

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

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

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

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

四、具体实现步骤

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

　　

　　　　

　　

　　//保存鼠标的位置

　　

　　

　　2、div样式　

　　

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

　　

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

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

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

　　

 

转载于:https://www.cnblogs.com/saya/p/f_accumulation_jquery_001.html