-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy path鼠标悬浮卡片.html
80 lines (74 loc) · 1.61 KB
/
鼠标悬浮卡片.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,div,h1{margin: 0;padding: 0;}
body{
background: #DE9191;
}
#box{
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
width: 100px;
height: 100px;
background: #3A48E6;
}
#popover{
position: absolute;
border: 2px solid #fa1ef1;
color: #fff;
width: 200px;
display: none;
pointer-events: none;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="popover">
<h1>I'm header</h1>
<span>I'm message</span>
</div>
</body>
<script type="text/javascript">
var oBox=document.getElementById("box");
var oPop=document.getElementById("popover");
var flag=false;
oBox.onmouseover=function(event){
var event=event||window.event;
oPop.style.display="block";
// flag=true;
oBox.onmousemove=function(event){
// if(!flag) return ;
event.stopPropagation();
oPop.style.left=event.clientX+"px";
oPop.style.top=event.clientY+"px";
// return false;
}
return false;
}
oBox.onmouseout=function(){
// flag=false;
oPop.style.display="none";
}
// oBox.onmouseenter=function(event){
// var event=event||window.event;
// // oPop.style.display="block";
// // oPop.style.top=event.clientY+"px";
// // oPop.style.left=event.clientX+"px";
// oBox.onmousemove=function(event){
// var event=event||window.event;
// oPop.style.display="block";
// oPop.style.top=event.clientY+"px";
// oPop.style.left=event.clientX+"px";
// }
// }
// oBox.onmouseleave=function(){
// oPop.style.display="none";
// }
</script>
</html>