1.添加a的属性标签 划入显示 划出隐藏 滑动时跟随鼠标
代码：
JS原生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
ul,li{
list-style: none;
}
.tip{
position:absolute;
height: 30px;
line-height: 30px;
background: yellow;
border: 1px solid #000;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
</head>
<body>
<div id="app">
<a href="" title="item1">item 1</a><br><br>
<a href="" title="item2">item 2</a><br><br>
<a href="" title="item3">item 3</a><br><br>
<a href="" title="item4">item 4</a><br><br>
</div>
<script type="text/javascript">
var alink = document.getElementsByTagName('a');
for(i=0;i<alink.length;i++){
alink[i].onmouseover = function(e){//鼠标划入
e = e||window.event; //兼容火狐和谷歌
var odiv = document.createElement('div');//创建dom元素
odiv.className= "tip";//更改class/id
this.newtitle = this.title;//添加自定义属性
odiv.innerHTML = this.newtitle;
//更改元素文本this指向划入的那个a
this.title = ""//清空这个titile
odiv.style.top = e.clientY+20+'px';//e.clientY鼠标距离屏幕最上面的值
odiv.style.left = e.clientX+20+'px';
document.body.appendChild(odiv);//添加dom元素
}
alink[i].onmouseout = function(){
var odiv1 =document.getElementsByClassName("tip")[0];//找到那个节点
document.body.removeChild(odiv1);//移出那个节点
this.title = this.newtitle;
}
alink[i].onmousemove = function(e){//鼠标移动事件
e = e||window.event;
var odiv2 = document.getElementsByClassName("tip")[0];
odiv2.style.top = e.clientY+20+'px';
odiv2.style.left = e.clientX+20+'px';
}
}
</script>
</body>
</html>
2.jquery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
ul,li{
list-style: none;
}
.tip{
position:absolute;
height: 30px;
line-height: 30px;
background: yellow;
border: 1px solid #000;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
</head>
<body>
<div id="app">
<ul id="ul">
<li title="li1">li1</li>
<li title="li2">li2</li>
<li title="li3">li3</li>
<li title="li4">li4</li>
</ul>
<a href="" title="item1" class="xxx">item 1</a><br><br>
<a href="" title="item2" class="xxx">item 2</a><br><br>
<a href="" title="item3" class="xxx">item 3</a><br><br>
<a href="" title="item4" class="xxx">item 4</a><br><br>
</div>
<script type="text/javascript">
$(function(){
$(".xxx").hover(function(e){
e = e||window.event;
this.newtitle = this.title;
$tip = $('<div class="tip">'+this.newtitle+'</div>');
$tip.offset({
top:e.pageY+20,
left:e.pageX+20,
})
$tip.appendTo('body');
this.title = "";
},function(e){
e = e||window.event;
$tip = $(".tip").remove();
this.title = this.newtitle;
})
$(".xxx").on("mousemove",function(e){
e = e||window.event;
var $tip = $(".tip").offset({
top:e.pageY+20,
left:e.pageX+20,
})
})
})
</script>
</body>
</html>