js超链接提示：当鼠标移到超链接上时弹出提示内容且鼠标能复制其中的内容，当鼠标不在超链接和提示内容上时，隐藏提示内容

当鼠标移到超链接上时弹出提示内容且鼠标能复制其中的内容，当鼠标不在超链接和提示内容上时，隐藏提示内容。
拜托各位大侠指点指点,在下不胜感谢!

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    var p="";
    function init(){
    var a=document.links;
    var div=document.getElementById("test");
    for(var i=0;i<a.length;i++){
    a[i].onmouseover=over;
    a[i].onmouseout=function(){
       p=window.setTimeout(out,500);
    };
    }
    div.onmouseover=over;
    div.onmouseout=function(){
    window.setTimeout(out,500);
    };
    }
    function over(e){
    window.clearTimeout(p);
    var a=e||window.event;
    var src=a.srcElement||a.currentTarget;
    var x=parseInt(a.clientX)+4;
    var y=parseInt(a.clientY)+4;
    var div=document.getElementById("test");
    div.style.display="block";
    if(src.tagName=="A"){
    div.innerHTML=src.getAttribute("href");
    div.style.left=x+"px";
        div.style.top=y+"px";
    }
    }
    function out(e){
    var div=document.getElementById("test");
    div.style.display="none";
    }
    window.onload=init;
    </script>
    </head><body>
    <a href="http://www.baidu.com">baidu</a>
    <a href="http://www.hao123.com">hao123</a>
    <div id="test" style="display:none;position:absolute; background-color:#0F0"></div>
    </body>
    </html>
    这样试试
      

  2.   

    1 样式
    <style type="text/css"> 
    .div1
    {
     display:none;
     position:absolute ;
     left:50px;
     top:50px;
     width:100px;
     height:100px;
     border:1px solid red ;
    z-index:0 ;
    }.div2
    {
      z-index:10 ;
      border:1px solid blue ;
    }  </style>
    2 jquery代码:$(function(){   $("#input1").mouseover(function(){ 
    $("#div1").addClass("div2");
    $("#div1").show();
    });$("#div1").mouseout(function(){
    $("#div1").hide();
    });});3 html:<a id="input1" name="input1" href="#" >连接</a>
    <div id="div1" class="div1">
    弹出层
    </div>