本文に余白を付けずに改訂しました

Question

this codepenにはdivがありますが、これは一種のブラシのように動作します。 divはページ上でマウスをたどるようにプログラムされています。マウスがどこにあっても隠れたテキストの背後にある白いdivを作成し、マウスがその場所を離れるときにそれらを削除したいと思います。私はこれに取り組んでいますが、私の進歩を妨げる別の問題があります。

以前は、ブラシdivの位置をマウスとの接触を維持するために500ピクセル高くしなければなりませんでした。私がコードをこのようにしておくと（確かに間違っていますが、なぜそれが分からないのか分かりませんが）、ボディに追加された白いdivは約500ピクセルも高すぎます。私はブラシdivを絶対的かつ相対的な位置に設定しようとしましたが、どちらも違いを生むようには見えません。

同様のことは、ブラシから500pxの違いを取り除いたときに発生します。ブラシの表示が500pxほど低く、白いdivが正しい位置に追加されます。

誰もこの現象の論理的な説明とそれを避ける方法を見つけることができますか？ありがとう。ここ

は、使用されるjavascript（一部はJQuery）である：

window.onload = function() { 
    var brush = $('#brush'); 
    window.addEventListener('mousemove', function(event) { 
    var x = event.clientX - 50; 
    var y = event.clientY - 50; 
    $('#brush').css({"margin-left": x, "margin-top": y}); 

    var div = $('<div>').css({ 
     "position": "absolute", 
     "left": brush.css("margin-left"), 
     "top": brush.css("margin-top"), 
     "width": "100px", 
     "height": "100px", 
     "background-color": "white", 
     "z-index": "5" 
    }).addClass('clearable'); 
    $(document.body).append(div); 
    }); 
}; 

Answer 1

座標が一致しなければならず、この場合には、私は両方のdiv要素のための上部と左の値を保ちます。

window.onload = function() { 
var brush = $('#brush'); 
window.addEventListener('mousemove', function(event) { 
    var x = event.clientX - 50; 
    var y = event.clientY - 50; 
    $('#brush').css({"left": x, "top": y}); 

    var div = $('<div>').css({ 
     "position": "absolute", 
     "left": brush.css("left"), 
     "top": brush.css("top"), 
     "width": "100px", 
     "height": "100px", 
     "background-color": "white", 
     "z-index": "5" 
    }).addClass('clearable'); 
    $(document.body).append(div); 
    }); 
};