光标移至某区域会自动显示信息
JavaScript=》练武,
jquery=》开枪
原有代码:
<td class="users">${news.owner.nickname} <div class="usersInfo"> <table> <tr> <td>账号</td> <td>${news.owner.nickname}</td> </tr>
然后添加jquery:
之后对信息进行css设置,隐藏,以及绝对定位,进行jquery设置,光标进入显示,光标出去即消失
其中选择器的作用,表示如果光标到达这一行,则就会显示,否者就会消失。
<title>新闻列表</title> <style type="text/css"> .usersInfo{ display:none; width:200px; background:#eee; border:1px solid #333; position:absolute;/*把定位改为绝对定位,即弹出usersinfo中的内容*/ } </style> <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function(){ // 保证页面加载完成后在执行 // 选择器.动作,hover表示是由两个函数组合而成的。其中的this指当前单元格 $(".users").hover(function(){ $(".usersInfo",this).css("display","block"); },function(){ $(".usersInfo",this).css("display","none"); }); }); </script> </head>
在页面中使用这种css:
<div class="usersInfo">
<table>
<tr>
<td>账号</td>
<td>${news.owner.nickname}</td>
</tr>
<tr>
<td>姓名</td>
<td>${news.owner.realname}</td>
</tr>
<tr>
<td>电话</td>
<td>${news.owner.phone}</td>
</tr>
<tr>
<td>邮件</td>
<td>${news.owner.email}</td>
</tr>
<tr>
<td>地址</td>
<td>${news.owner.address}</td>
</tr>
</table>
</div>
显示效果:把光标放在作者上就会显示作者的信息。