<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标悬停展示详情</title>
<meta charset="utf-8" />
<style>
p span{
display: inline-block;
width:100px;
background-color: #ddd;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#div_toop {
background-color:#93ee15;
}
</style>
<script src='./lib/js/jquery-3.2.1.min.js'></script>
<script>
$(function () {
//鼠标位于span发生 mouseover 事件
$("p span").mouseover(function (e) {
this.content =this.innerHTML;
$("body").append("<div id='div_toop'>" + this.content + "</div>");//将要显示的内容添加到 新建 div标签中 并追加到 body 中
$("#div_toop")
.css({
//设置 div 内容位置
"top": (e.pageY) + "px",
"position": "absolute",
"left": (e.pageX + 20) + "px"
}).show();
}).mouseout(function () { //鼠标指针从 span标签 上离开时 发生mouseout 事件
this.content = '';
$("#div_toop").remove();//移除对象
}).mousemove(function (e) { //鼠标指针在 span标签 中移动时 发生mouseout 事件
$("#div_toop")
.css({
//设置 div 内容位置
"top": (e.pageY) + "px",
"position": "absolute",
"left": (e.pageX + 20) + "px"
});
});
});
</script>
</head>
<body>
<p><span>努力争取,不必勉强,观察体会,顺势而为</span></p>
</body>
</html>