一、效果图

二、需求描述

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

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

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

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

三、实现思路

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

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

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

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

四、具体实现步骤

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

  <div class="hoverdiv">
    <div style="text-align: center; vertical-align: middle;"><label id="message" style="color: #000000;"></label></div>
  </div>

  //保存鼠标的位置

  <input type="hidden" id="pagex" />

  <input type="hidden" id="pagey" />

  2、div样式 

  <style type="text/css">
    .blockdiv{
      width:285px;
      height:30px;
      display:none;
      left: 977px;
      top: 300px;
      position: absolute;
      z-index:1002;
      opacity:1;
      background:#D6D6D6;
    }
  </style>

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

  <table>
    <thead>
      <tr>
        <th class="center">name</th>
        <th>pass</th>
      </tr>
    </thead>
    <tbody>
    #foreach(${item} in ${draftPage.result})
      <tr class="hoverTag">
        <td>
          <label>
            <input type="hidden" name="message" value="$!dateTool.format("yyyy-MM-dd HH:mm:ss", $!{item.tagTime})">

          </label>
        </td>
        <td>$!{item.name}</td>
        <td>$!{item.pass}</td>
      </tr>
    #end
    </tbody
  </table>

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

  <script>
    //获取鼠标的位置,并保存到页面隐藏域中
    $(document).mousemove(function (e) {
      document.getElementById("pagex").value = e.pageX;//pageX() 属性是鼠标指针的位置,相对于文档的左边缘。
      document.getElementById("pagey").value = e.pageY;//pageY() 属性是鼠标指针的位置,相对于文档的上边缘。
    });

    var MouseEvent = function(e){
      this.x = e.pageX;
      this.y = e.pageY;
    }

    var Mouse = function(e){
      var kdheight = jQuery(document).scrollTop();
      mouse = new MouseEvent(e);
      leftpx = mouse.x+15;
      toppx = mouse.y-10;
    }

    $(".hoverTag").hover(
      function (e) {//鼠标经过时业务处理

        Mouse(e);
        var message = e.currentTarget.firstElementChild.firstElementChild.lastElementChild.defaultValue;
        if(message == null || message == '' || message == undefined){
          $(".hoverdiv").css({
            "display": "none",
          });
          $("#message").html("");
        }else{
          $(".hoverdiv").css({
            "display": "block",
            "left": leftpx,
            "top": toppx,
          });
          $("#message").html(message);
        }
      },
      function () {//鼠标离开时业务处理
        $(".hoverdiv").css({
          "display": "none",
        });
        $("#message").html("");
      }
    )
  </script>

Jquery hover鼠标经过时弹出div动态提示语的更多相关文章

  1. 工作当中实际运用(3)——js原生实现鼠标点击弹出div层 在点击隐藏

    function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...

  2. JavaScript总结之鼠标划过弹出div单击出现对话框

    为了满足他们的永无止境的要求,我可谓是任劳任怨啊,累断了双手,看瞎了双眼.这个是来写鼠标划过一个按钮,然后弹出一个小提示框解释,另外根据radio是否选中,判断点击后如何执行,然后执行之后再有一个确认 ...

  3. JavaScript鼠标事件,点击鼠标右键,弹出div

    document.oncontextmenu = function(){return false}; //禁止鼠标右键菜单显示 var res = document.getElementById('b ...

  4. jQuery实现鼠标移上弹出提示框,移出消失

    <TD>里有一行数据 "那片笑声让我想起......"  假设超出规定长度将用......代替, 而现在要通过鼠标移动到......上 显示全部内容,移出则消失.如下图 ...

  5. Win7关机时弹出对话框,提示你想要的信息

    博主换了个公司,要求每天写日志,次日8点前没写的话就要扣钱,1篇10块钱,博主已经两次写完忘记提交到ERP系统了,捂脸... 因为公司要求所有工作在公司配的台式电脑上,所以如果能在关机前弹个提示(不关 ...

  6. jQuery 弹出div层

    目的:使用jQuery弹出一个div窗口:这种效果经常应用于页面内容的展示,登录效果的实现.其实,实现这种效果有好多种方式: 效果如下: 代码如下: <html> <head> ...

  7. 鼠标滑过弹出jquery在线客服

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 基于jQuery鼠标点击弹出登陆框效果

    基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type=" ...

  9. jQuery插件--zTree中点击节点实现页面跳转时弹出两个页面的问题

    这是第一次使用zTree,所以在使用之前我要先写一个demo来学习一下.我们要注意的是,zTree是一个jQuery插件,所以我们在导入zTree的js文件之前要先导入jQuery的js文件. 我们先 ...

随机推荐

  1. Git实现1个项目2个地址1次推送

    Git实现1个项目2个地址1次推送 考虑到不需要pull操作,因此本方法适用于个人项目分别在两个平台或地址进行部署 给origin 增加一个可以push的地址 git remote set-url - ...

  2. Linux远程拷贝scp

    Linux的scp命令可以实现两台服务器之间互相拷贝文件,我的测试环境是Centos6.4. 基本的命令格式 scp 拷贝目标文件 远程用户@远程主机地址:远程目录 一.从本机拷贝到目标远程主机 # ...

  3. HDU5213 Lucky【容斥+莫队】

    HDU5213 Lucky 题意: 给出\(N\)个数和\(k\),有\(m\)次询问,每次询问区间\([L1,R1]\)和区间\([L2,R2]\)中分别取一个数能相加得到\(k\)的方案数 题解: ...

  4. 关于KMP算法的理解

    上次因为haipz组织的比赛中有道题必须用到KMP算法,因此赛后便了解了下它,在仔细拜读了孤~影神牛的文章之后有种茅塞顿开的感觉,再次ORZ. 附上链接http://www.cnblogs.com/y ...

  5. zjnu1707 TOPOVI (map+模拟)

    Description Mirko is a huge fan of chess and programming, but typical chess soon became boring for h ...

  6. CodeForces - 220B 离散化+莫队算法

    莫队算法链接:传送门 题意: 有n个数,m个区间.问区间内有多少个x,x满足x的个数等于x的值的个数(如果x是3,区间内要存在3个3). 题解: 因为a[i]太大,所以要离散化一下,但是不能用map容 ...

  7. ef实现左关联查询

    在EF中,当在dbset使用join关联多表查询时,连接查询的表如果没有建立相应的外键关系时,EF生成的SQL语句是inner join(内联),对于inner join,有所了解的同学都知道,很多时 ...

  8. RSA 加密解密使用实例

    http://www.dtmao.cc/news_show_692109.shtml 本文不讨论RSA加密解密本身,只记录使用方法及遇到的坑,RSA原理及注意事项可在网上查找. 背景:公司的一个需求, ...

  9. 破解编码面试第六版 - JavaScript

    破解编码面试第六版 - JavaScript Cracking the Coding Interview: 189 Programming Questions and Solutions 6th Ed ...

  10. git alias all in one

    git alias all in one workspace:工作区 staging area:暂存区/缓存区 local repository:或本地仓库 remote repository:远程仓 ...