window.onload = function(){

var btn = document.getElementsByTagName('button')[0];

var flt = document.getElementsByTagName('div')[0];

btn.onclick = function(){

event.cancelBubble = true;

var x = btn.offsetLeft - 15 + 'px';

var y = btn.offsetTop - 100 + 'px';

flt.style.top = y;

flt.style.left = x;

flt.style.display = 'block';

}

document.onclick = function(){

flt.style.display = 'none';

}

}

*{

margin: 0px;

padding: 0px;

}

div{

width: 60px;

height: 100px;

background: #33ccff;

display: none;

position: absolute;

}

div ul{

text-align: center;

}

div li{

list-style-type: none;

}

button{

top: 300px;

left: 400px;

position: absolute;

}

Click

标签：

isp

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com

特别注意：本站所有转载文章言论不代表本站观点！

本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。

鼠标进入显示悬浮窗，思路有简单有困难。

首先要注意的是我们要给悬浮窗设置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部分

JS部分

var oBox=document.getElementById("box");

var oPop=document.getElementById("popover");

oBox.οnmοuseοver=function(event){

var event=event||window.event;

// flag=true;

document.οnmοusemοve=function(event){

// if(!flag) return ;

oPop.style.left=event.clientX+"px";

oPop.style.top=event.clientY+"px";

oPop.style.display="block";

}

}

oBox.οnmοuseοut=function(){

// flag=false;

oPop.style.display="none";

}

然而还是我想简单了，乍一看这个移动十分流畅，然而当 改动了 onmouseout 的时候，popover框就出现了跳动和闪动的情况。

好了，我们可以开始 百度/谷歌 解决问题了。

已经找到解决方案，问题的原因是这样的： 我们自己移动鼠标的时候，有时候会将鼠标移动到悬浮窗上，也就是在这个时候产生的抖动，我们的代码没有跟上我们的手速。

总之就是 onmouseover 被我们自己设置的悬浮层给遮盖住了。所以我们只要让鼠标不触发在悬浮窗的事件即可。

在我们的 popover css中加上这么一句话

pointer-events: none;

至此之后，我们的 popover 就与我们的鼠标隔绝了，我们的鼠标永远都在 我们的oBox上悬浮，自然也不会发生抖动了。

但是，实际上这是有问题的。因为一般情况下，我们的悬浮窗应该是可以被鼠标放上去的，这明显与实际不符。