起因:要做一个根据鼠标事件,将一个隐藏元素移到鼠标位置显示,我想那很简单啊,我用获取下位置,jquery.offset()设置下就ok了,就出现了如下代码;
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
#box1{
width: 100px;
height: 100px;
background-color: aqua;
position:absolute;
/* display: none; 开始是隐藏的我就不做隐藏了*/
}
#btn{
position: absolute;
left: 300px;
top :300px;
}
</style>
<script>
function enter(){
var btn = $('#btn');
var left = btn.offset().left;
var top = btn.offset().top;
var box1 = $('#box1');
//$('#box1').show();//1
$('#box1').offset({
top:top,
left:left
})
$('#box1').show();//2
}
function leave(){
$('#box1').hide();
}
</script>
</head>
<body>
<div id="box1">移动我</div>
<button id="btn" onmouseenter="enter()" onmouseleave="leave()">鼠标移到这</button>
</body>
</html>
写完看着代码,还不错啊,以为会想如期一样么
…,那就大错特错了!
看第一次鼠标移到,元素移动到了正确的位置,第二次却移动到右下,再一次就移到屏外了
一脸懵逼,经苦死冥想后,宣告失败~
转折,回到家搜索后,有一句话引起深思
what
what? why?
遂将代码//1 地方打开,//2地方注释
正常了!!! 哇~
有知道原理的可以告诉下
983
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
