光标移至某区域会自动显示信息

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>

 

显示效果：把光标放在作者上就会显示作者的信息。