如何计算具有相同类的 div 的 pageX、pageY 彼此分开

Question

我正在尝试使悬停效果如下所示：https://andstudio.lt/work/因此，当用户将鼠标悬停在项目标题上时，会出现固定到光标的图像。 我在互联网上找到了一些代码，并在代码笔中创建，这里是 https://codepen.io/ChicagoJostik/pen/abzqXOv 它实际上正在工作，但不正确。

首先，我在这里遇到了问题：

function moveCircle(e) {
TweenMax.to(".cursor", 0.5, {
css: {
left: e.pageX,
top: e.pageY
},
});
}

因此，当我将鼠标悬停在任何项目上时，所有"光标"的页面X和页面Y都将被计算在内。 如何仅对我悬停在哪个项目中的"光标"进行计数？ 我不知道也许是问题使代码无法正常工作， 但如果有任何建议，你可以勇敢地写作。

提前感谢，对不起我的英语。

Answer 1

这是一个可以尝试的工作示例。

片段：

$(".hoverme a").mouseenter(function() {
img = $(this).attr("data-image");
$(".image-placeholder").attr("style","background:url(" + img + ") no-repeat center center");
$(".image-placeholder").addClass("close");
$(document).on("mousemove", function(e) {
$(".image-placeholder").css({
left: e.pageX,
top: e.pageY
});
});
});
$(".hoverme").mouseleave(function() {
$(".image-placeholder").removeClass("close");
});

body {
background-color: #8f8d8d;
}
.container {
padding: 75px;
position: relative;
z-index: 10;
}
.hoverme {
padding-bottom: 20px;
}
.hoverme a {
opacity: 0.5;
display: inline-block;
font-size: 20px;
color: #fff;
transition: 0.2s;
}
.hoverme a:hover {
opacity: 1;
}
.image-placeholder {
visibility: hidden;
opacity: 0;
width: 30%;
padding-bottom: 21%;
position: absolute;
transform: translate(-50%, -50%) scale(0.7);
z-index: 9;
background-size: cover !important;
transition: opacity 0.1s, visibility 0.1s, transform 0.2s;
left: -100%;
top: -100%;
}
.image-placeholder.close {
display: block;
visibility: visible;
opacity: 1;
transform: translate(-50%, -50%) scale(1.1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-placeholder"></div>
<div class="container">
<div class="hoverme">
<a data-image="https://i.imgur.com/kuqQfXB.jpg">
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
</div>
<div class="hoverme">
<a data-image="https://i.imgur.com/UVP46pV.jpg">
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
</div>
<div class="hoverme">
<a data-image="https://i.imgur.com/8YLDZ4B.jpg">
3. Lorem ipsum dolor sit amet, consectetur adipiscing eli</a>
</div>
<div class="hoverme">
<a data-image="https://i.imgur.com/9uAL5Oh.jpg">
4. Donec et velit volutpat, posuere orci pulvinar lobortis</a>
</div>
</div>