zoukankan      html  css  js  c++  java
  • 几行简单代码实现DIV层上显示Tooltip效果

     最近在做一个项目,要在鼠标移到层上后显示出tip提示,网上找了半天,都很麻烦,就自己修改了一个,记录在下面

    测试在IE 7、8、9及 chrome 上没问题。

    <HTML> <HEAD>
    <title>Tooltip</title> <STYLE type="text/css">
    body{
    font-size:12px;
    }
    .dek { Z-INDEX: 200; VISIBILITY: hidden; POSITION: absolute ; background:#CCCCCC;}
    .bd{
    100px; 
    padding:5px;
    }
    .top{
    height:20px;
    100px;
    background-color:#333333;
    color:#FFFFFF;
    padding:5px;
    }

    </STYLE>
    </HEAD>
    <body>
    <DIV class="dek" id="dek"></DIV>

    <SCRIPT>

    Xoffset=-20;
    Yoffset= 20;       
    var nav,old,iex=(document.all),yyy=-1000;
    if(navigator.appName=="Netscape"){(document.layers)?nav=true:old=true;}

    if(!old)
    {
    var skn=(nav)?document.dek:dek.style;
    if(nav)document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove=get_mouse;
    }

    function popup(msg)
    {
    var content="<div class='top'>内容提要</div><div width=100 class='bd'>"+msg+"</div>";
    if(old){alert(msg);return;} 
    else{yyy=Yoffset;
    if(nav){skn.document.write(content);skn.document.close();skn.visibility="visible"}
    if(iex){document.all("dek").innerHTML=content;skn.visibility="visible"}
    }
    }

    function get_mouse(e)
    {
    var x=(nav)?e.pageX:event.x+document.body.scrollLeft;skn.left=x+Xoffset;
    var y=(nav)?e.pageY:event.y+document.body.scrollTop;skn.top=y+yyy;
    }

    function kill()
    {
    if(!old){yyy=-1000;skn.visibility="hidden";}
    }
    </SCRIPT>

        <span onMouseOver="popup('显示的提示信息,显示的提示信息!!!');" onmouseout="kill();">普通文字上的效果
    </span>
    <div>
    <img src="image4.jpg" onMouseOver="popup('显示的提示信息,显示的提示信息!!!');" onmouseout="kill();"/>
    <p>
       图片上的效果
    </p>
    </div>
    <div onMouseOver="popup('显示的提示信息,显示的提示信息!!!');" onmouseout="kill();" class="top">
       层上的效果
    </div>
    </body>
    </HTML>

  • 相关阅读:
    GYM 101572C(模拟)
    GYM 101572A(单调队列优化dp)
    Codeforces 183C(有向图上的环长度)
    Codeforces 183A(坐标系性质)
    2019湘潭校赛 G(并查集)
    2019湘潭校赛 H(dp)
    2019湘潭校赛 E(答案区间维护)
    Codeforces 1141F2(贪心、预处理)
    Codeforces Round #411(Div. 2)——ABCDEF
    基数排序学习
  • 原文地址:https://www.cnblogs.com/ranzige/p/div_tooltip.html
Copyright © 2011-2022 走看看