zoukankan      html  css  js  c++  java
  • 提示框跟随鼠标移动

    <!DOCTYPE html>
    <html lang="en">
    <head>
    
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{500px;margin: 300px auto;border: solid 1px black;position: relative;}
            .title{}
            .title h2{background-color: #ccc;padding: 10px 0;  border: 1px solid #000;
                /*position: relative;*/
                /*z-index: 2;*/
                margin-bottom: 30px;}
            .cont p{200px;background: #eee;margin: 0;display: none;position: absolute;left: 0;top:0;
                /*z-index: 6;*/
              }
    
        </style>
    </head>
    <body>
    <div class="box">
        <div class="title">
            <h2>二级标题二级标题二级标题1111</h2>
            <h2>二级标题二级标题二级标题2222</h2>
        </div>
        <div class="cont">
            <p>第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容第一个新闻内容</p>
            <p>第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容第二个新闻内容</p>
        </div>
    </div>
    </body>
    <script>
    var aH=document.querySelectorAll(".title h2");
    var aP=document.querySelectorAll(".cont p");
        for(var i=0;i<aH.length;i++){//先遍历元素
            aH[i].index=i;  //编号
            aH[i].onmouseover=function () {//移进来显示
                aP[this.index].style.display="block";
    
            }
            aH[i].onmouseout=function () {//移出去消失
                aP[this.index].style.display="none"
            }
            aH[i].onmousemove=function (eve) { //使p跟着鼠标走
                var e=eve||window.event
                aP[this.index].style.left=e.offsetX+5+"px";
              
                aP[this.index].style.top=e.offsetY+5+
                    this.offsetTop+"px";  // 因为p的定位相对于大框,offset的坐标相对于事件源,不够,需要加上事件源相对于大框的left和top;+5是为了让p和h错开,这样p就不会一直闪烁了。
            }
        }
    </script>
    </html>
  • 相关阅读:
    prototype.js超强的javascript类库
    MySQL Server Architecture
    Know more about RBA redo block address
    MySQL无处不在
    利用Oracle Enterprise Manager Cloud Control 12c创建DataGuard Standby
    LAMP Stack
    9i中DG remote archive可能导致Primary Database挂起
    Oracle数据库升级与补丁
    Oracle为何会发生归档日志archivelog大小远小于联机重做日志online redo log size的情况?
    Oracle Ksplice如何工作?How does Ksplice work?
  • 原文地址:https://www.cnblogs.com/hy96/p/11417532.html
Copyright © 2011-2022 走看看