相对鼠标位置定义div漂浮层

最新推荐文章于 2021-12-10 16:36:27 发布

lgrain

最新推荐文章于 2021-12-10 16:36:27 发布

阅读量213

点赞数

分类专栏： js 文章标签：互联网 HTML

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏



<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312">   
		<title>
			鼠标悬停事件
		</title>
<style type="text/css"> 
.divstyle{	 
	z-index:1;position:absolute;background-color:#999999;
}
#supplierDiv2 {
	z-index:6;
	position:relative;
	text-align:right;
	padding-left:5px;   
	padding-top:1px;    
  cursor: hand; 
  font-family: "Tahoma";  
} 
#supplierDiv3 {  
	z-index:7;
	position:relative;	
	padding-top:10px;   
	padding-left:5px;
  width:350px;
	height:150px;
	background-color:#ffffff;	
	padding: 5px; 
	text-align: left; 
	color: red; 
	font-size: 15px; 	
	overflow-y:auto;	
	line-height:30px; 
 	Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=100);     
}   
</style>
<script type="text/javascript">			
	function drawDiv(event,o)
	{				
	 document.getElementById("supplierDiv1").style.left=event.clientX;
	 document.getElementById("supplierDiv1").style.top=event.clientY;				 
	 document.getElementById("supplierDiv1").style.display="";
	}	
	function closeDiv(){
		document.getElementById("supplierDiv1").style.display="none";
	}		
</script> 
	</head>
	<body>

		<table border=1 width="1000px;">
			<tr>
				<td><a href="http://www.baidu.com"  onmousemove="drawDiv(event,this)" >测试文字</a></td>
				<td><a href="http://www.baidu.com"  onmousemove="drawDiv(event,this)" >测试文字</a></td>
				<td><a href="http://www.baidu.com"  onmousemove="drawDiv(event,this)">测试文字</a></td>
			</tr>
			<tr>
				<td><a href="http://www.baidu.com"  onmousemove="drawDiv(event,this)" >测试文字</a></td>
				<td><a href="http://www.baidu.com"  onmousemove="drawDiv(event,this)" >测试文字</a></td>
				<td><a href="http://www.baidu.com"  onmousemove="drawDiv(event,this)">测试文字</a></td>
			</tr>
			<tr>
				<td><a href="http://www.baidu.com"  onmousemove="drawDiv(event,this)" >测试文字</a></td>
				<td><a href="http://www.baidu.com"  onmousemove="drawDiv(event,this)" >测试文字</a></td>
				<td><a href="http://www.baidu.com"  onmousemove="drawDiv(event,this)">测试文字</a></td>
			</tr>
			<tr>
				<td><a href="http://www.baidu.com"  onmousemove="drawDiv(event,this)" >测试文字</a></td>
				<td><a href="http://www.baidu.com"  onmousemove="drawDiv(event,this)" >测试文字</a></td>
				<td><a href="http://www.baidu.com"  onmousemove="drawDiv(event,this)">测试文字</a></td>
			</tr>
			<tr>
				<td><a href="http://www.baidu.com"  onmousemove="drawDiv(event,this)" >测试文字</a></td>
				<td><a href="http://www.baidu.com"  onmousemove="drawDiv(event,this)" >测试文字</a></td>
				<td><a href="http://www.baidu.com"  onmousemove="drawDiv(event,this)">测试文字</a></td>
			</tr>
		</table>
		<div id="supplierDiv1" class="divstyle" style="display:none;">
			<div id="supplierDiv2" onclick="closeDiv()">Close</div>
			<div id="supplierDiv3"  >
				<a href="http://www.baidu.com" >一三九移动互联网信息服务（北京）有限公司</a><br>			
				<a href="http://www.baidu.com" >一三九移动互联网信息服务（北京）有限公司</a><br>		
				<a href="http://www.baidu.com" >一三九移动互联网信息服务（北京）有限公司</a><br>		
				<a href="http://www.baidu.com" >一三九移动互联网信息服务（北京）有限公司</a><br>		
				<a href="http://www.baidu.com" >一三九移动互联网信息服务（北京）有限公司</a><br><br>		
			</div>
		</div>
	</body>
</html>

lgrain

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
相对鼠标位置定义div漂浮层

[code="html"] 鼠标悬停事件 .divstyle{ z-index:1;position:absolute;background-color:#999999;}#supplierDiv2 { z-index:6; position:relative; text-align:right; padd...
复制链接

扫一扫

专栏目录