鼠標進入顯示懸浮窗，思路有簡單有困難。
首先要注意的是我們要給懸浮窗設置position為absolute，不然我們改了 style.left style.top發現沒有變化很尷尬。其余的內容看起來就很明了了。
style部分
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;
}
body部分
<body>
<div id="box"></div>
<div id="popover">
<h1>I'm header</h1>
<span>I'm message</span>
</div>
</body>
JS部分
var oBox=document.getElementById("box");
var oPop=document.getElementById("popover");
oBox.onmouseover=function(event){
var event=event||window.event;
// flag=true;
document.onmousemove=function(event){
// if(!flag) return ;
oPop.style.left=event.clientX+"px";
oPop.style.top=event.clientY+"px";
oPop.style.display="block";
}
}
oBox.onmouseout=function(){
// flag=false;
oPop.style.display="none";
}
然而還是我想簡單了，乍一看這個移動十分流暢，然而當 改動了 onmouseout 的時候，popover框就出現了跳動和閃動的情況。
好了，我們可以開始 百度/谷歌 解決問題了。
已經找到解決方案，問題的原因是這樣的： 我們自己移動鼠標的時候，有時候會將鼠標移動到懸浮窗上，也就是在這個時候產生的抖動，我們的代碼沒有跟上我們的手速。
總之就是 onmouseover 被我們自己設置的懸浮層給遮蓋住了。所以我們只要讓鼠標不觸發在懸浮窗的事件即可。
在我們的 popover css中加上這么一句話
pointer-events: none;
至此之后，我們的 popover 就與我們的鼠標隔絕了，我們的鼠標永遠都在 我們的oBox上懸浮，自然也不會發生抖動了。
但是，實際上這是有問題的。因為一般情況下，我們的懸浮窗應該是可以被鼠標放上去的，這明顯與實際不符。