原始标题：jQuery尾随光标（鼠标）效果在Blogger上无法正常工作（已编辑）
以这种拖尾的光标效果使我大吃一惊。
无论出于何种原因，它都会在我的 Blogger / BS4 网站（已添加BS 4的已剥离的Blogger模板）中显示为略微关闭，但是显示得很好 Codepen 中的strong>。
在我的Blogger / BS4实现中，尾随圆坐标偏离大约 -15px （左）/ -30px （顶部）。现在，我可以简单地将这些偏移量合并到我的 clientX / ClientY 坐标中，以获得正确的结果，例如
var x = e.clientX + $(window).scrollLeft() -15;
var y = e.clientY + $(window).scrollTop() -30;
但是，在不了解造成偏移的原因的情况下，担心的是，其他用户/设备/屏幕甚至不同页面的显示方式都会不同。
实际上，我确实在更复杂的Blogger实现上进行了尝试，并且clientY在另一个站点上的坐标又相差了50px左右。手动修改整个模板可能不是一个好主意，因为在登录页面上可以正常使用，而在另一页面上完全可以关闭！
NB 我为该演示启用了指针，但是它的工作方式是与cursor: none;一起使用，以便使两个圆圈成为光标！
任何指针将不胜感激；）
已更新：
初始响应后，看来客户端 X / Y（也尝试过pageX / Y，screenX / Y等）受文档中元素设置的边距影响 。
在我的简化测试案例中，这是Blogger应用的.widget和.section边距，但是在其他页面上无疑会存在其他元素边距，例如我有另一个博客页面，它更像是-15px（左）/- 85px （上）。调整任何设置的页面/元素边距是不可能的，所以更大的问题实际上是：
为什么利润率会首先干扰clientX / Y使用情况。
我的理解是clientX / Y从角度衡量坐标，而我只是不明白为什么边距会产生这种影响。
有问题的Blogger演示：https://magicmbblog.blogspot.com/p/custom-circle-cursor.html（现在可以使用<nav>的修复程序对其进行操作了！）
工作代码笔：https://codepen.io/magicmb/pen/MMoabE
代码：
<div class="cursor"></div>
<div class="cursor"></div>
<div class="blank"></div>
<style >
html,*{ margin:0; padding:0;}
*{
/*cursor: none;*/
}
.blank {
height: 200vh;
}
body {
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://picsum.photos/2200/1900/?random) center center;
background-size: cover;
height: 100vh;
/*display: flex;*/
align-items: center;
justify-content: center;
}
h1 {
color: white;
font-family: futura-pt, sans-serif;
letter-spacing: 10px;
font-weight: bold;
text-transform: uppercase;
}
.cursor {
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
}
.cursor:nth-child(1) {
background-color: #D26;
z-index: 1;
}
.cursor:nth-child(2) {
background-color: #FFF;
}
</style>
<script>
$(document)
.mousemove(function(e) {
$('.cursor')
.eq(0)
.css({
left: e.clientX + $(window).scrollLeft(),
top: e.clientY + $(window).scrollTop()
});
setTimeout(function() {
$('.cursor')
.eq(1)
.css({
left: e.clientX + $(window).scrollLeft(),
top: e.clientY + $(window).scrollTop()
});
}, 100);
})
</script>
答案 0 :(得分：1)
工作示例中的问题是由父元素上的margin引起的。尤其是.section { margin: 0 15px; }的左侧值和.widget { margin: 30px 0; }的顶部值。
有两个解决方法。首先，您可以在.cursor元素本身上设置负边距，以抵消在父级上设置的任何内容。
第二，您可以将.cursor元素移到body的根中，以使父样式不会以任何方式影响它们。
我建议使用后者。
答案 1 :(得分：0)
我仍然不确定是什么原因导致利润下降，但是事实证明，当我将<div class="cursor"></div>放在<nav class="navbar2"> Bootstrap导航栏中的其他开发博客上时，元素，它完全为我解决了这个问题。
即使在简化的测试用例演示中没有导航栏，我也只是创建了一个空的导航栏并将光标元素放置在其中
<nav class="navbar2">
<div class="cursor"></div>
<div class="cursor"></div>
</nav>
这也解决了这个问题。
所以我不知道这是与Bootstrap4相关还是与Blogger相关，但这确实帮了我大忙。我将向这个StackOverflow问题添加一个Bootstrap4标签，以防其他人遇到类似问题。