实现效果图:
当鼠标移动到对应文字位置上时出现提示框,提示框跟随鼠标移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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 原点位置:可视窗口的左上角为原点
*/
var arr = ["HTML。。。", "CSS。。。", "JavaScript。。。", "Angular。。。"]
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 + 10 + 'px';
oMsg.style.top = e.clientY + 10 + 'px';
}
}
}
</script>
</head>
<body>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">Angular</a>
<div id = 'msg'></div>
</body>
</html>