Div不跟随指针

Question

我有一个应该跟随指针的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/，但它没有像小提琴一样工作

它跟随指针，但是离指针的左上角很远。

Answer 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（感谢你们！！！

谢谢

Answer 2

如果您想使图像的左上角和鼠标指针的位置匹配，则需要为图像设置负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>

Here是在小提琴中在线对其进行检查的链接。

UPDATE

如果您的唯一原因是显示和隐藏列表项的内容，则无需手动检测鼠标位置，可以轻松地使用jQuery进行操作。首先将此选择器添加到您的CSS文件中：

li.list-item div {
  display: none;
}

然后您可以使用.small-item和mouseover显示每个children的子级，并固定如下所示的状态：

$(document).ready(function() {
    $('.list-item').mouseover(function() {
        $(this).children('.small-title').show()
    });
})