实现div跟着鼠标走

最新推荐文章于 2023-01-31 04:44:06 发布

水煮鱼的博客

最新推荐文章于 2023-01-31 04:44:06 发布

阅读量2.3k

点赞数

分类专栏： .NET 文章标签： div function html

本文链接：https://blog.csdn.net/panfb227/article/details/6798153

版权

.NET 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

效果如图，鼠标移到链接的文字上则在下面弹出对于设置好的div：

实现代码：

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Untitled Document</title>

  <script type="text/javascript">
	function show(d1){
		var div3 = document.getElementById(d1); 
  		document.getElementById(d1).style.display = 'block';
		div3.style.left=event.clientX+1;   
		div3.style.top=event.clientY+1;
		div3.style.position="absolute";   
	}
    
	function hide(d1){
  		document.getElementById(d1).style.display = 'none';  
	}
  </script>
  </head>
  <body>
  	<a href="#" οnmοusemοve="show(1)" οnmοuseοut="hide(1)">111111</a>  	
	<a href="#" οnmοusemοve="show(2)" οnmοuseοut="hide(2)">222222</a>
  	<a href="#" οnmοusemοve="show(3)" οnmοuseοut="hide(3)">333333</a>
	<div id="1" style="display:none;">
  		aaaaaaaa1<br/>aaaaaaaa2<br/>
	</div>
	<div id="2" style="display:none;">
		bbbbbbb1
  		<br/><font color=red><b>bbbbbbbb2</b></font><br/>
		<br/><font color=blue size=20><b>bbbbbbbb3</b></font><br/>
	</div>
	<div id="3" style="display:none;">
		cccccccc1<br/>cccccccc2<br/>
	</div>
  </body>
</html>