カーソルストーカーを表示する

カーソルストーカーを表示するためにChatGptで勉強した結果このようになりました。
追加分だけを記述します。

App.jsx

<div
        className="custom-cursor"
        style={{
          top: `${mousePosition.y}px`,
          left: `${mousePosition.x}px`,
          backgroundColor: isPressed ? 'blue' : 'red', 
        }}
      >
</div>

App.css

.custom-cursor {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: red; /* カーソルの色を赤に設定 */
  border-radius: 50%; /* 丸いカーソルを作成 */
  pointer-events: none;
  transform: translate(-50%, -50%); /* カーソルの中央に位置合わせ */
}

私が使っている言語はReactですので、jsが含まれるものはjsxファイルに書き込んだほうが楽なのだと思います。

プログラミングを読んでみると
App.jsxから、座標を取得したところに位置を指定していることがわかります。
そして、背景色をisPressedがtrueならblueを、falseならredを表示するプログラミングとなっています。

App.cssはこのカーソルストーカーのサイズなどを作るおまけ程度のものです。
もし、posistion:absolute;がなければ、
top,leftなどが使えないので、カーソルが動きません。
width,heightは.custom-sursorのサイズ、つまりカーソルストーカーのサイズを意味しています。
border-radius:50%;は表示を丸に変更します。
transform:transrate();はカーソルの位置に色の円を調整します。

問題なのがこれ、pointer-events:none;
pointerの下に円があるので、pointer自体が反応してもクリックできないのでpointerの機能を消す、そうするとpointer-events:none;によって、自動でカーソル機能が円につきます。

詳しくは
pointer-events