<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width: 500px;
min-height: 400px;
_height:400px;
margin: 200px auto;
background-color: #ccc;
margin-top: 20px;
position: relative;
}
.follwDiv{
width: 200px;
height: 100px;
background-color: #d64e4e;
color: black;
border: solid 1px #9c2c2c;
}
.text{
display: inline;
width: auto;
height: 50px;
line-height: 50px;
text-align: center;
/* border: solid 1px red; */
}
</style>
</head>
<body>
<pre>
跟随鼠标的提示框
</pre>
<div id="box">
<div class="text1 text">中国嫦娥飞天的感想</div><br>
<div class="text2 text" >中国是世界上最大的人口大国！</div>
<div class="follwDiv"></div>
</div>
<script>
var ores=document.getElementsByClassName("follwDiv")[0];
// console.log(ores);
ores.style.display="none";
ores.style.position="absolute";
var aText=document.getElementsByClassName("text");
for(var i=0;i<aText.length;i++){
var index;
// aText[i].setAttribute("index",i); 这种直接在网页上显示出HTML的属性
aText[i].index=i;
aText[i].onmousemove=function(){
if(this.index===0){
ores.innerHTML= "2013年12月14号，嫦娥3号卫星登上了月球，激动人心的时刻终于要到来了 ....";
}
if(this.index===1){
ores.innerHTML="中国有13亿人口,是世界上最打的人口国家，也是世界上历史四大古国之一.....";
}
var s= getMouseCoord();
ores.style.left=s.X+"px";
ores.style.top=5+s.Y+"px";
ores.style.display="block";
}
aText[i].onmouseout=function(){
ores.style.display="none";
}
}
//获得鼠标对象的坐标
function getMouseCoord(even){
//处理兼容： 事件对象
e=even||window.event;
var X= e.offsetX;//相对父元素
var Y=e.offsetY;
var screenX=e.clientX;//当前可视区域
var screenY=e.clientY;
var pageX=e.pageX;//整个页面
var pageY=e.pageY;
return {
X,
Y,
screenX,
screenY,
pageX,
pageY
}
}
</script>
</body>
</html>
