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

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>

 

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

posted @ 2020-06-08 09:19  云山有相逢  阅读(373)  评论(0)    收藏  举报