二、jquery鼠标滑过显示提示框实例二
鼠标划过用户名时，在鼠标右下角显示div展示用户资料这个效果
1、效果图
2、实现方式
无非就三大块，一个是div的定位，这个是该效果的主要难点；二个是通过ajax异步加载数据；第三个就是要用到两个js属性onmouseover和onmouseout，即鼠标经过和鼠标离开。
3、实现步骤
(1)、首先设计好要显示用户资料的div的样式, 这里要注意的该方法不是给每个用户名的旁边都绑定一个div，当鼠标经过时显示，鼠标离开时隐藏，网页里就一个显示信息的div，哪里需要显示时就定位在哪里，这要就需要把该div的定位方式设置为绝对定位。
HTML代码：
<div class=”blockdiv” id=”blockdiv”>
<div class=”pic”>
<img src=”../../Users/images/899。png” id=”imguserhead” />
</div>
<div class=”box”>
<table width=”220″ border=”0″ style=”overflow: hidden; text-overflow: ellipsis; white-space: nowrap”>
<tr>
<td style=”width: 70px;”>用户名：</td>
<td>
<label id=”lblusername”></label>
</td>
</tr>
<tr>
<td>真实姓名：</td>
<td>
<label id=”lblrealname”></label>
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<label id=”sex”></label>
</td>
</tr>
<tr>
<td>所属地区：</td>
<td>
<label id=”lbladdress”></label>
</td>
</tr>
<tr>
<td>邮箱：</td>
<td>
<label id=”lblemall”></label>
</td>
</tr>
</table>
<div style=”text-align: left; color: green; line-height: 40px; height: 30px; display: none;” id=”messagediv “>正在加载中…</div>
</div>
</div>
(2)、相应css代码
