Div不跟随指针
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Div不跟随指针相关的知识，希望对你有一定的参考价值。
我有一个应该跟随指针的div，但是尽管它跟随指针，但它现在离指针很远。
我尝试了一些不同的代码，都由我自己编写，在此处建议或在网上找到，但没有帮助。
现在最有效的方法是这个。
var currentMousePos = { x: -1, y: -1 };
$(document).mousemove(function(event) {
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY;
$(".hidden-img").css('top', currentMousePos.y);
$(".hidden-img").css('left', currentMousePos.x);
});
我也尝试过此http://jsfiddle.net/BfLAh/1/，但它没有像小提琴一样工作
它跟随指针，但是离指针的左上角很远。
答案
我设法使用了此代码并使之生效，至少在定位方面
$(document).ready(function() {
$(".list-item").mousemove(function(e) {
var offset = $(".list-item").offset();
$("#hoverDisplay").animate({
left: e.pageX - offset.left,
top: e.pageY - offset.top
}, 1);
});
});
现在剩下的唯一问题是，我有20多个“ li”项目必须悬停并显示自己的隐藏div。这是仅2个“ li”元素的代码。
<li class="list-item" style="background-color: #03C0A4;">
<div class="small-title" style="color:#E07354">nevaly</div>
<a href="a-project-called/nevaly/index.html" style="color:#E07354" class="project-title" onmouseenter=toggleHiddenDisplay("hoverDisplay") onmouseout=toggleHiddenDisplay("hoverDisplay")>Connecting brands and influencers - no limits.</a>
<div class="hidden-img" id="hoverDisplay" style="display:none;">
<img src='a-project-called/nevaly/thumb.gif'>
</div>
</li>
<li class="list-item" style="background-color: #f8e975;">
<div class="small-title" style="color:#e32e1d">Kulturhavn</div>
<a href="a-project-called/kulturhavn/index.html" style="color:#e32e1d" class="project-title" onmouseenter=toggleHiddenDisplay("hoverDisplay") onmouseout=toggleHiddenDisplay("hoverDisplay")>Ahoy! From the cultural harbour of Copenaghen.</a>
<div class="hidden-img" id="hoverDisplay" style="display:none;">
<img src='a-project-called/kulturhavn/thumb.gif'>
</div>
</li>
现在，当我将鼠标悬停时，仅显示第一个隐藏的div内容。
[如何使用我编写的JS来获取悬停的“ li”元素的hoverDisplay（感谢你们！！！
谢谢
另一答案
如果您想使图像的左上角和鼠标指针的位置匹配，则需要为图像设置负margin-top和margin-left，如下所示：
$(document).ready(function () {
$("body").mousemove(function (e) {
$("#image").animate({
left: e.pageX,
top: e.pageY
}, 1);
});
});body {
overflow:hidden;
position:absolute;
height:100%;
width:100%;
background:#efefef;
}
#image {
height:50px;
width:50px;
margin-top:-10px;
margin-left:-10px;
position:absolute;
}<div id="container">
<img id="image"></img>
</div>以上是关于Div不跟随指针的主要内容，如果未能解决你的问题，请参考以下文章