类似title的鼠标跟随事件

时间：2021-07-12 04:38:01
$(document).ready(function(){
    // 创建一个div显示提示信息
    var dropTitle = document.createElement("div");
    dropTitle.id= "backdropTitle";
    dropTitle.style.backgroundColor="#fff";
    dropTitle.innerHTML="要显示的内容";
    document.getElementsByTagName('body')[0].appendChild(dropTitle);

    // 鼠标移入遮罩层事件
    var backdropTitle = document.getElementById("backdropTitle");
    var backdropBorderS = document.getElementsByClassName("backdrop-border");
    backdropTitle.style.display = "none";
    for(var i=0,len=backdropBorderS.length;i<len;i++){
        backdropBorderS[i].onmousemove = function(evt) {
            var oEvent = evt || window.event;
            var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
            var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
            backdropTitle.style.display = "block";
            backdropTitle.style.position = "absolute";
            backdropTitle.style.left = oEvent.clientX + scrollleft + 10 + "px";
            backdropTitle.style.top = oEvent.clientY + scrolltop + 10 + "px";
            backdropTitle.style.zIndex = "2060";
            setTimeout(function(){
                backdropTitle.style.display = "none";
            },6000);
        };
        backdropBorderS[i].onmouseout = function (){
            backdropTitle.style.display = "none";
        }
    }
    $(".backdrop-border").each(function(){
        $(this).parent().siblings().css("background-color","#ddd");
        $(this).parent().siblings().find("h4").find("a").css("color","#888");
    })
});

随机推荐

  1. 【NodeJs环境下bower】如何更改bower&lowbar;components文件夹的位置

    bower在初始化,默认是将bower_components文件夹放到项目的根目录下,若是public/index.html如何配置bower_components下的js或者css类库呢?只需要将b ...

  2. quartz&period;net任务调度：源码及使用文档

    目录: 1.quartz.net任务调度:源码及使用文档 2.quartz.net插件类库封装 前言 前段时间把自己封装quartz.net 类库的过程总结到博客园,有网友想要看一下源码,所以就把源码 ...

  3. 1&period;3WEB API 默认以json格式返回数据，同时定义时间格式，返回格式

    首先我们知道,web api 是可以返回任意类型的,然后在输出的过程中转为(默认的)xml. 但是xml是比较费流量的,而且大多前端都是用json对接,所以我们也只能随大流,把它输出改成json. 不 ...

  4. ubuntu 上安装node&period;js 的简单方法

    一.安装 1.$ sudo apt-get install nodejs 2.$ sudo apt-get install npm 二.升级     1.升级npm命令如下: $ sudo npm i ...

  5. Python学习—数据库篇之SQL语句

    一.数据库级别 1.显示数据库 show databases; 默认数据库: mysql - 用户权限相关数据 test - 用于用户测试数据 information_schema - MySQL本身 ...

  6. Django&plus;MongoDB批量插入数据

    在百万级和千万级数据级别进行插入,pymongo的insert_many()方法有着很强的优势.原因是每次使用insert_one()方法进行插入数据,都是要对数据库服务器进行一次访问,而这样的访问是 ...

  7. rpc和http

    rpc,远程过程调用,分布式各服务在不同的节点,因为不在同一进程中,所以节点间的调用需要通过网络进行传输,rpc是基于tcp/ip的,通过长连接进行通信.客户端需要缓存服务端的ip和端口,服务端也要缓 ...

  8. 27-5-LTDC控制LCD显示屏

    1.显示原理 (1).液晶显示是分2层显示的,配置层级结构体参数再将数据输出到混合器合成,显示再液晶上. (2).LTDC初始化结构体 控制 LTDC 涉及到非常多的寄存器,利用 LTDC 初始化结构 ...

  9. 安装CDH5时出错 5&period;68&period;168&period;192&period;in-addr&period;arpa domain name pointer bogon&period;

    这个是因为使用的DNS是联通的server,联通会将所有保留的网络地址RFC1918( http://tools.ietf.org/html/rfc1918)都指向"bogon" ...

  10. Sql Over的用法

    转载自:http://www.cnblogs.com/lanzi/archive/2010/10/26/1861338.html OVER(PARTITION BY)函数介绍 开窗函数 Oracle从 ...

相关文章