跟随鼠标移动提示框

最新推荐文章于 2023-11-01 11:20:28 发布

地势清切

最新推荐文章于 2023-11-01 11:20:28 发布

阅读量171

点赞数

文章标签： html5 javascript css

本文链接：https://blog.csdn.net/weixin_43680743/article/details/120609780

版权

JavaScript DOM操作鼠标事件历史人物网页交互

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		a{display: block; font-size: 40px; margin: 100px; width: 130px;}
		#msg{width: 600px; height: 150px; background-color: gray; color: white; display: none; position: absolute;}
	</style>
	<script>
		/* 
			事件类型
				mouseover
					让提示框显示
				mouseout
					让提示框隐藏
				mousemove
					让提示框跟随鼠标去移动
					clientX clientY  原点位置：可视窗口的左上角为原点
唐太宗李世民(598年1月28日-649年7月10日)，陇西成纪（今甘肃省秦安县)人。唐朝第二位皇帝(626~649年在位)，杰出的政治家、战略家、军事家、诗人，唐高祖李渊嫡次子,母为太穆皇后窦氏
唐高宗李治（628年7月21日-683年12月27日)[1]，字为善，祖籍陇西成纪，唐朝第三位皇城(649至683年在位）,唐太宗李世民第九子，嫡三子，其母为文德顺圣皇后长孙氏，与唐太宗嫡长子太子李承乾、嫡次子魏王李泰为同母兄弟。
武则天
唐玄宗

		*/
		var arr = ["唐太宗李世民(598年1月28日-649年7月10日)，陇西成纪（今甘肃省秦安县)人。唐朝第二位皇帝(626~649年在位)，杰出的政治家、战略家、军事家、诗人，唐高祖李渊嫡次子,母为太穆皇后窦氏","唐太宗李世民第九子，嫡三子，其母为文德顺圣皇后长孙氏，与唐太宗嫡长子太子李承乾、嫡次子魏王李泰为同母兄弟。","wuzetian","tangxuanzong"];
		window.onload = function(){
			var aAs = document.getElementsByTagName("a");
			var oMsg = document.getElementById("msg");

			for(var i = 0; i < aAs.length; i++){
				aAs[i].index = i;
				aAs[i].onmouseover = function(){
					oMsg.innerHTML = arr[this.index];
					oMsg.style.display = "block";
				}

				aAs[i].onmouseout = function(){
					oMsg.style.display = "none";
				}

				aAs[i].onmousemove = function(ev){
					var e = ev || window.event;
					oMsg.style.left = e.clientX + 5 + "px";
					oMsg.style.top = e.clientY + 5 + "px";
				}
			}
		}
	</script>
</head>
<body>
	<a href="#">唐太宗</a>
	<a href="#">唐高宗</a>
	<a href="#">武则天</a>
	<a href="#">唐玄宗</a>
	<div id="msg"></div>
</body>
</html>