鼠标进入显示悬浮窗，思路有简单有困难。
首先要注意的是我们要给悬浮窗设置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上悬浮，自然也不会发生抖动了。
但是，实际上这是有问题的。因为一般情况下，我们的悬浮窗应该是可以被鼠标放上去的，这明显与实际不符。 | 
|手机版|小黑屋|Java自学者论坛
( 声明：本站文章及资料整理自互联网，用于Java自学者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2021-4-19 20:01:13