js 跟随鼠标移动提示框

最新推荐文章于 2023-03-09 20:43:42 发布

barkL

最新推荐文章于 2023-03-09 20:43:42 发布

阅读量628

点赞数 1

分类专栏： HTML Js 文章标签： javascript

本文链接：https://blog.csdn.net/barkl/article/details/119144201

版权

HTML 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		
			a{
				font-size: 30px;
				color: #000000;
				display:block;
				margin-top: 50px;
				border: #000000 solid 1px;
				width: 150px;
				text-align: center;
				background: linear-gradient(to bottom,#5555ff,#55ffff);
				box-shadow:1px 1px 5px 0px;
				text-decoration: none;
				
			}
			#div1{
				
				border: #000000 solid 1px;
				
				
			}
			#div2{
				display: none;
				position:absolute;
				width: 300px;
				background-color: rgba(0,255,255,0.5);
				border-radius: 10px;
			}
			
		</style>
		<script type="text/javascript">
			
			window.onload=function(){
				
				var odiv2=document.getElementById("div2");
				var oa=document.getElementsByTagName("a");
				var arr=["鸿星尔克（ERKE）是一家集研发、生产、销售为一体的运动服饰企业，由吴荣照创立于2000年6月，总部位于福建省厦门市[1]，曾获“全国模范劳动关系和谐企业”荣誉称号。","安踏（全称：安踏（中国）体育用品有限公司）是一家集生产制造与营销导向于一体的综合性体育用品企业，由丁和木于1991年在福建晋江创立，专注于为普通消费者提供高性价比的专业体育用品。","李宁是中国运动品牌，由李宁于1990年创立，其产品主要包括运动及休闲鞋类、服装、器材和配件产品。","特步（全称：特步(中国)有限公司）为中国领先的体育用品企业之一，总部位于福建泉州，始创于1987年，2001年创立特步品牌，2008年6月3日正式在港交所主板挂牌上市。"];
				
				
				for(var i=0;i<oa.length;i++){
					oa[i].index=i;
					oa[i].onmouseover=function(){
						odiv2.style.display="block";
						odiv2.innerHTML=arr[this.index];
						
					}
					oa[i].onmouseout=function(){
						
						odiv2.style.display="none";
					}
					//获取事件对象之后才能调用事件对象的属性
					oa[i].onmousemove=function(ev) {
						var e = ev || window.event;
						odiv2.style.left=e.clientX+15+"px";			//client获取可视窗口为原点的鼠标位置
						odiv2.style.top=e.clientY+20+"px";			//防止因为div层级覆盖出现显示异常，让鼠标和div2之间设置几个px的距离
					}
				}
				
}
			
		</script>
	</head>
	<body>
		<div id="div1">
			<a href="#">鸿星尔克</a>
			<a href="#">安踏</a>
			<a href="#">李宁</a>
			<a href="#">特步</a>
			<div id="div2"></div>
		</div>
	</body>
</html>