天天看点

div跟随鼠标悬浮显示

<span style="font-size:18px;"><!doctype html>
<html >
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
<style>  
   #hint{  
    width:198px;  
    height:200px;
    border:1px solid #000000;  
    background:#99ff33;  
    position:absolute;  
    z-index:9;  
    padding:6px;  
    line-height:17px;  
    text-align:left;  
    top:1520px;  
   }  
</style> 
<script type="text/javascript">
 	function showme(){  
	     var oSon = window.document.getElementById("hint");  
	     if (oSon == null) return;  
	     with (oSon){  
	      	style.display = "block";  
	      	style.pixelLeft = window.event.clientX + window.document.body.scrollLeft + 6;  
	      	style.pixelTop = window.event.clientY + window.document.body.scrollTop + 9;  
	     }  
    }  

    function hideme(){  
	     var oSon = window.document.getElementById("hint");  
	     if(oSon == null) return;  
	     oSon.style.display="none";  
    }  
</script>
 <body>  
   <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  οnmοuseοver="showme()">测试div跟随鼠标悬浮显示1</a><br/><br/>
   <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  οnmοuseοver="showme()" οnmοuseοut="hideme()">测试div跟随鼠标悬浮显示2</a><br/><br/>
   <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  οnmοuseοver="showme()" οnmοuseοut="hideme()" οnmοusemοve="showme()">测试div跟随鼠标悬浮显示3</a><br/><br/>
   <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  οnmοuseοver="showme()" οnmοuseοut="hideme()" >测试div跟随鼠标悬浮显示4</a><br/><br/>
   <div id="hint" style="display:none" οnmοuseοut="hideme()">
   		哈哈哈哈哈哈	
   		<input type="button" οnclick="test()" value="按钮"/>
   		<a href="index.jsp" target="_blank" rel="external nofollow" >链接</a>
   </div>  
  </body>  
</html></span>
           

效果:

div跟随鼠标悬浮显示

继续阅读