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

如果要匹配图像左上角和鼠标指针的位置，则可以为图像设置负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是它的链接，用于在拨弄中对其进行在线检查。

更新

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

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

然后您可以使用.small-item和mouseover来显示每个children的子对象，如下所示：

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

我们可以摆脱这一点，因为正如您在评论中提到的那样，您只想修复子状态。

.mouseout(function() {
    $(this).children('.small-title').hide();
})

Answer 2

我设法使用了这段代码，并使它至少在定位方面起作用

    $(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？（感谢你们！）！

谢谢

Div没有跟随指针

2 个答案: