【CSS】cursorの種類とpointerの使い方

2026年3月17日2026年4月1日

CSSでマウスカーソルのデザインを変更できるcursorプロパティがあります。

pointer（指マーク）の実装方法から、コピペで確認できる種類に応じたカーソル一覧も解説します。

CSSのcursorとは

cursorプロパティは、要素の上にマウスカーソル（ポインター）が乗ったときの「カーソルの形（アイコン）」を指定・変更するCSSです。

ユーザーにとって「クリックできるのか」「文字を入力できるのか」「今は押せないのか」といった情報を直感的に伝えることができます。

CSSのcursorについて

cursorプロパティの使い方
ボタンにはpointer（指マーク）を指定しよう
cursorの代表的な種類一覧
実践的な使用例

cursorプロパティの使い方

セレクタ { cursor: 値; }

カーソルを変更したい要素に対してcursor: 値;を指定します。

特別な擬似クラス（:hoverなど）を使わなくても、要素の上にマウスが乗った瞬間、自動的に指定したカーソルの形に切り替わります。

指定なし
(通常の矢印)

cursor: crosshair;
(十字マークになる！)

HTMLコード表示

<div class="cur1-wrapper">
  <div class="cur1-demo-area">
    
    <div class="cur1-box box-default">
      指定なし<br>
      (通常の矢印)
    </div>

    <div class="cur1-box box-crosshair">
      cursor: crosshair;<br>
      (十字マークになる！)
    </div>

  </div>
</div>

CSSコード表示

.cur1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.cur1-demo-area {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cur1-box {
  width: 180px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: bold;
  border-radius: 8px;
  color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}
.cur1-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
.box-default {
  background-color: #6c757d;
  /* 指定なしなのでデフォルトの矢印 */
}
.box-crosshair {
  background-color: #0d6efd;
  /* ▼ ここでカーソルの種類を指定 */
  cursor: crosshair; 
}

ボタンにはpointer（指マーク）を指定しよう

HTMLのリンク（<a>タグ）は、ブラウザの標準設定で指マークになるように設定されています。

しかし、<div>や<span>タグを使って自作したボタンは、その設定がありません。

そのため、クリックできる要素を作った時は、cursor: pointer;をセットで指定するとよいです。

どちらが「押せそう」に見えますか？

❌ 忘れた場合

詳しく見る

マウスを乗せても矢印のままなので、クリックできるか不安になります。

⭕️ pointerを指定

詳しく見る

指マークになるので、「ここは押せるんだ！」と直感的に分かります。

HTMLコード表示

<div class="cur2-wrapper">
  <p class="cur2-title">どちらが「押せそう」に見えますか？</p>
  
  <div class="cur2-demo-area">
    
    <div class="cur2-btn-wrap">
      <span class="cur2-label">❌ 忘れた場合</span>
      <div class="cur2-btn btn-bad">
        詳しく見る
      </div>
      <p class="cur2-text">マウスを乗せても矢印のままなので、クリックできるか不安になります。</p>
    </div>

    <div class="cur2-btn-wrap">
      <span class="cur2-label">⭕️ pointerを指定</span>
      <div class="cur2-btn btn-good">
        詳しく見る
      </div>
      <p class="cur2-text">指マークになるので、「ここは押せるんだ！」と直感的に分かります。</p>
    </div>

  </div>
</div>

CSSコード表示

.cur2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.cur2-title {
  text-align: center;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}
.cur2-demo-area {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}
.cur2-btn-wrap {
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cur2-label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #555;
}
.cur2-text {
  font-size: 12px;
  color: #666;
  margin-top: 15px;
  line-height: 1.5;
}
.cur2-btn {
  width: 100%;
  padding: 15px 0;
  text-align: center;
  font-weight: bold;
  color: white;
  border-radius: 30px;
  background-color: #198754;
  transition: 0.3s;
}
.cur2-btn:hover {
  background-color: #146c43;
}
/* ❌ cursorの指定を忘れたボタン */
.btn-bad {
  /* 何も指定しないので矢印 */
}
/* ⭕️ cursor: pointer を指定したボタン */
.btn-good {
  /* 指マークにする */
  cursor: pointer; 
}

cursorの代表的な種類一覧

cursorにはpointer以外にもたくさんの種類が用意されています。

全てを覚える必要はありませんが、「こんなカーソルもあるんだ。」と知っておくと、実務でのデザインの幅が広がります。

代表的なものをパレット形式でまとめました。

1. 基本・リンク系

auto 自動（ブラウザ任せ）

default 通常の矢印

pointer 指マーク（リンク・ボタン）

help ヘルプ（？マーク）

context-menu メニューあり

none カーソルを隠す（消える）

2. ステータス（状態・禁止）系

wait 処理中（砂時計など）

progress バックグラウンド処理中

not-allowed 操作禁止（未入力ボタン等）

no-drop ドロップ禁止

3. 選択・十字系

text テキスト選択（Iビーム）

vertical-text 縦書きテキスト選択

crosshair 十字マーク（範囲選択など）

cell セル選択（Excel風）

4. ドラッグ・移動系

move 移動できる（十字矢印）

grab つかめる（開いた手）

grabbing つかんでいる（握った手）

copy コピーできる（＋マーク）

alias ショートカット作成（矢印）

5. ズーム（拡大・縮小）系

zoom-in 拡大できる（虫眼鏡＋）

zoom-out 縮小できる（虫眼鏡－）

6. リサイズ（サイズ変更）系

※n(北)、s(南)、e(東)、w(西) の方角を表しています。

n-resize 上へリサイズ

s-resize 下へリサイズ

e-resize 右へリサイズ

w-resize 左へリサイズ

ne-resize 右上へリサイズ

nw-resize 左上へリサイズ

se-resize 右下へリサイズ

sw-resize 左下へリサイズ

ew-resize 左右へリサイズ

ns-resize 上下へリサイズ

nesw-resize 斜め（右上-左下）

nwse-resize 斜め（左上-右下）

row-resize 行の高さ変更

col-resize 列の幅変更

all-scroll 全方向へスクロール可

HTMLコード表示

<div class="cur-all-wrapper">
  
  <div class="cur-category">
    <div class="cur-cat-title">1. 基本・リンク系</div>
    <div class="cur-grid">
      <div class="cur-item" style="cursor: auto;">
        <span class="cur-val">auto</span>
        <span class="cur-desc">自動（ブラウザ任せ）</span>
      </div>
      <div class="cur-item" style="cursor: default;">
        <span class="cur-val">default</span>
        <span class="cur-desc">通常の矢印</span>
      </div>
      <div class="cur-item" style="cursor: pointer;">
        <span class="cur-val">pointer</span>
        <span class="cur-desc">指マーク（リンク・ボタン）</span>
      </div>
      <div class="cur-item" style="cursor: help;">
        <span class="cur-val">help</span>
        <span class="cur-desc">ヘルプ（？マーク）</span>
      </div>
      <div class="cur-item" style="cursor: context-menu;">
        <span class="cur-val">context-menu</span>
        <span class="cur-desc">メニューあり</span>
      </div>
      <div class="cur-item" style="cursor: none;">
        <span class="cur-val">none</span>
        <span class="cur-desc">カーソルを隠す（消える）</span>
      </div>
    </div>
  </div>

  <div class="cur-category">
    <div class="cur-cat-title">2. ステータス（状態・禁止）系</div>
    <div class="cur-grid">
      <div class="cur-item" style="cursor: wait;">
        <span class="cur-val">wait</span>
        <span class="cur-desc">処理中（砂時計など）</span>
      </div>
      <div class="cur-item" style="cursor: progress;">
        <span class="cur-val">progress</span>
        <span class="cur-desc">バックグラウンド処理中</span>
      </div>
      <div class="cur-item" style="cursor: not-allowed;">
        <span class="cur-val">not-allowed</span>
        <span class="cur-desc">操作禁止（未入力ボタン等）</span>
      </div>
      <div class="cur-item" style="cursor: no-drop;">
        <span class="cur-val">no-drop</span>
        <span class="cur-desc">ドロップ禁止</span>
      </div>
    </div>
  </div>

  <div class="cur-category">
    <div class="cur-cat-title">3. 選択・十字系</div>
    <div class="cur-grid">
      <div class="cur-item" style="cursor: text;">
        <span class="cur-val">text</span>
        <span class="cur-desc">テキスト選択（Iビーム）</span>
      </div>
      <div class="cur-item" style="cursor: vertical-text;">
        <span class="cur-val">vertical-text</span>
        <span class="cur-desc">縦書きテキスト選択</span>
      </div>
      <div class="cur-item" style="cursor: crosshair;">
        <span class="cur-val">crosshair</span>
        <span class="cur-desc">十字マーク（範囲選択など）</span>
      </div>
      <div class="cur-item" style="cursor: cell;">
        <span class="cur-val">cell</span>
        <span class="cur-desc">セル選択（Excel風）</span>
      </div>
    </div>
  </div>

  <div class="cur-category">
    <div class="cur-cat-title">4. ドラッグ・移動系</div>
    <div class="cur-grid">
      <div class="cur-item" style="cursor: move;">
        <span class="cur-val">move</span>
        <span class="cur-desc">移動できる（十字矢印）</span>
      </div>
      <div class="cur-item" style="cursor: grab;">
        <span class="cur-val">grab</span>
        <span class="cur-desc">つかめる（開いた手）</span>
      </div>
      <div class="cur-item" style="cursor: grabbing;">
        <span class="cur-val">grabbing</span>
        <span class="cur-desc">つかんでいる（握った手）</span>
      </div>
      <div class="cur-item" style="cursor: copy;">
        <span class="cur-val">copy</span>
        <span class="cur-desc">コピーできる（＋マーク）</span>
      </div>
      <div class="cur-item" style="cursor: alias;">
        <span class="cur-val">alias</span>
        <span class="cur-desc">ショートカット作成（矢印）</span>
      </div>
    </div>
  </div>

  <div class="cur-category">
    <div class="cur-cat-title">5. ズーム（拡大・縮小）系</div>
    <div class="cur-grid">
      <div class="cur-item" style="cursor: zoom-in;">
        <span class="cur-val">zoom-in</span>
        <span class="cur-desc">拡大できる（虫眼鏡＋）</span>
      </div>
      <div class="cur-item" style="cursor: zoom-out;">
        <span class="cur-val">zoom-out</span>
        <span class="cur-desc">縮小できる（虫眼鏡－）</span>
      </div>
    </div>
  </div>

  <div class="cur-category">
    <div class="cur-cat-title">6. リサイズ（サイズ変更）系</div>
    <p style="font-size:12px; color:#666; margin:0 0 10px 0; padding-left:10px;">
      ※n(北)、s(南)、e(東)、w(西) の方角を表しています。
    </p>
    <div class="cur-grid">
      <div class="cur-item" style="cursor: n-resize;">
        <span class="cur-val">n-resize</span>
        <span class="cur-desc">上へリサイズ</span>
      </div>
      <div class="cur-item" style="cursor: s-resize;">
        <span class="cur-val">s-resize</span>
        <span class="cur-desc">下へリサイズ</span>
      </div>
      <div class="cur-item" style="cursor: e-resize;">
        <span class="cur-val">e-resize</span>
        <span class="cur-desc">右へリサイズ</span>
      </div>
      <div class="cur-item" style="cursor: w-resize;">
        <span class="cur-val">w-resize</span>
        <span class="cur-desc">左へリサイズ</span>
      </div>
      <div class="cur-item" style="cursor: ne-resize;">
        <span class="cur-val">ne-resize</span>
        <span class="cur-desc">右上へリサイズ</span>
      </div>
      <div class="cur-item" style="cursor: nw-resize;">
        <span class="cur-val">nw-resize</span>
        <span class="cur-desc">左上へリサイズ</span>
      </div>
      <div class="cur-item" style="cursor: se-resize;">
        <span class="cur-val">se-resize</span>
        <span class="cur-desc">右下へリサイズ</span>
      </div>
      <div class="cur-item" style="cursor: sw-resize;">
        <span class="cur-val">sw-resize</span>
        <span class="cur-desc">左下へリサイズ</span>
      </div>
      <div class="cur-item" style="cursor: ew-resize;">
        <span class="cur-val">ew-resize</span>
        <span class="cur-desc">左右へリサイズ</span>
      </div>
      <div class="cur-item" style="cursor: ns-resize;">
        <span class="cur-val">ns-resize</span>
        <span class="cur-desc">上下へリサイズ</span>
      </div>
      <div class="cur-item" style="cursor: nesw-resize;">
        <span class="cur-val">nesw-resize</span>
        <span class="cur-desc">斜め（右上-左下）</span>
      </div>
      <div class="cur-item" style="cursor: nwse-resize;">
        <span class="cur-val">nwse-resize</span>
        <span class="cur-desc">斜め（左上-右下）</span>
      </div>
      <div class="cur-item" style="cursor: row-resize;">
        <span class="cur-val">row-resize</span>
        <span class="cur-desc">行の高さ変更</span>
      </div>
      <div class="cur-item" style="cursor: col-resize;">
        <span class="cur-val">col-resize</span>
        <span class="cur-desc">列の幅変更</span>
      </div>
      <div class="cur-item" style="cursor: all-scroll;">
        <span class="cur-val">all-scroll</span>
        <span class="cur-desc">全方向へスクロール可</span>
      </div>
    </div>
  </div>

</div>

CSSコード表示

.cur-all-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  font-family: sans-serif;
}
.cur-category {
  margin-bottom: 30px;
}
.cur-category:last-child {
  margin-bottom: 0;
}
.cur-cat-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0 0 15px 0;
  padding-bottom: 5px;
  border-bottom: 2px solid #0d6efd;
  display: inline-block;
}
.cur-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 15px;
}
.cur-item {
  background-color: #ffffff;
  border: 2px solid #adb5bd;
  border-radius: 8px;
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.cur-item:hover {
  background-color: #e3f2fd;
  border-color: #0d6efd;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(13, 110, 253, 0.2);
}
.cur-val {
  font-weight: bold;
  color: #0d6efd;
  font-size: 16px;
  margin-bottom: 8px;
  word-break: break-all;
}
.cur-desc {
  font-size: 12px;
  color: #555;
  line-height: 1.4;
}

実践的な使用例

これらのcursorを実際のWebサイトでどのように使い分ければ良いのでしょうか？

ユーザーにとって親切なUI（ユーザーインターフェース）を作る代表的な実践例を3つご紹介します。

入力フォーム (text)
「ここに文字が打てます」と伝える。
クリックできるボタン (pointer)
「ここは押せます」と伝える。
エラーで押せないボタン (not-allowed)
「未入力があるのでまだ押せません」と伝える。

お問い合わせフォーム

お名前

送信する（未入力あり）

送信する（入力OK）

HTMLコード表示

<div class="cur4-wrapper">
  <div class="cur4-form-card">
    <div class="cur4-title">お問い合わせフォーム</div>

    <div class="cur4-group">
      <label class="cur4-label">お名前</label>
      <input type="text" class="cur4-input" placeholder="マウスを乗せると「I」になります">
    </div>

    <div class="cur4-action">
      <div class="cur4-btn-disabled">
        送信する（未入力あり）
      </div>
      
      <div class="cur4-btn-active">
        送信する（入力OK）
      </div>
    </div>

  </div>
</div>

CSSコード表示

.cur4-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
}
.cur4-form-card {
  width: 100%;
  max-width: 400px;
  background-color: #ffffff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.cur4-title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #333;
  margin: 0 0 20px 0;
}
.cur4-group {
  margin-bottom: 25px;
}
.cur4-label {
  display: block;
  font-size: 14px;
  font-weight: bold;
  color: #555;
  margin-bottom: 8px;
}
/* 実践例1：入力欄には text を指定（※inputタグはデフォルトでtextになります） */
.cur4-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 14px;
  cursor: text; 
}
.cur4-action {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
/* 実践例2：押せないボタンには not-allowed を指定 */
.cur4-btn-disabled {
  width: 100%;
  padding: 12px;
  text-align: center;
  font-weight: bold;
  color: #adb5bd;
  background-color: #e9ecef;
  border-radius: 4px;
  cursor: not-allowed; /* 禁止マークで押せないことをアピール */
}
/* 実践例3：押せるボタンには pointer を指定 */
.cur4-btn-active {
  width: 100%;
  padding: 12px;
  text-align: center;
  font-weight: bold;
  color: #ffffff;
  background-color: #0d6efd;
  border-radius: 4px;
  cursor: pointer; /* 指マークで押せることをアピール */
  transition: 0.2s;
}
.cur4-btn-active:hover {
  background-color: #0b5ed7;
}

おしゃれなcursor（カーソル）を作るには

cursorプロパティの基本をマスターしたら、Webサイトのデザインに合わせてカーソルそのものをおしゃれにカスタマイズしてみましょう。

画像を使ってオリジナルのカーソルを作ったり、ユーザーをワクワクさせるアニメーションを追加することができます。

おしゃれなcursorを作るには

好きな画像をカーソルにする方法（url指定）
追従カーソル（マウスストーカー）の作り方
クリックを促す波紋（リップル）エフェクト

好きな画像をカーソルにする方法（url指定）

自社のロゴマークやイラストなど、用意したオリジナル画像ファイルをマウスカーソルとして使うことができます。

指定方法はcursor: url('画像のパス'), auto;と書くだけですが、2つのルールがあります。

画像のサイズは「32px × 32px」程度にする
大きすぎる画像を指定すると、ブラウザが無視して表示しません。
小さくリサイズした画像（背景が透明なPNGやSVG形式）を使いましょう。
カンマ区切りで予備のカーソルを指定する
url('...')のあとに, autoや, pointerなど標準カーソルを記述しないと画像が読み込めなかった時にCSS全体がエラーになります。

下の枠内にマウスを乗せると、カーソルが「ロケット🚀」の画像に変わります！

オリジナル画像カーソル
(🚀の画像を使用)

HTMLコード表示

<div class="c-url-wrapper">
  <div class="c-url-controls">
    <p class="c-url-desc">下の枠内にマウスを乗せると、カーソルが「ロケット🚀」の画像に変わります！</p>
  </div>

  <div class="c-url-demo-area">
    <div class="c-url-box target-img-cursor">
      オリジナル画像カーソル<br>
      (🚀の画像を使用)
    </div>
  </div>

</div>

CSSコード表示

.c-url-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.c-url-controls {
  text-align: center;
  margin-bottom: 20px;
}
.c-url-desc {
  font-weight: bold;
  color: #333;
}
.c-url-demo-area {
  display: flex;
  justify-content: center;
  height: 200px;
}
.c-url-box {
  width: 100%;
  max-width: 400px;
  height: 100%;
  background-color: #e3f2fd;
  border: 2px dashed #0d6efd;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: bold;
  color: #0d6efd;
  font-size: 18px;
}
/* ⭕️ urlで画像を指定し、最後に必ず auto や pointer をつける */
.target-img-cursor {
  /* 今回はSVG画像を直接コード内に埋め込んでいます */
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><text y="24" font-size="24">🚀</text></svg>'), auto;
}

追従カーソル（マウスストーカー）の作り方

Webサイトでよく見かけるマウスの動きに遅れてついてくる「追従カーソル（マウスストーカー）」を作りたいと思う人は多いです。

しかし、フワッと遅れてついてくる動きはCSSのcursorプロパティだけでは作れません。

マウスストーカーの仕組み

CSSでcursor: none;を指定し、元のマウスカーソルを消す。
HTMLで「丸い図形（divタグ）」を用意する。
JavaScriptを使ってマウスの現在の座標（位置）を取得し、図形をその場所に移動させる。

枠内にマウスを入れて動かしてみてください！（※JSを使用しています）

このエリア内では元のカーソルが消え、
丸いストーカーが追従します。

HTMLコード表示

<div class="c-stalker-wrapper">
  <p class="c-stalker-desc">枠内にマウスを入れて動かしてみてください！（※JSを使用しています）</p>

  <div class="c-stalker-area" id="stalker-area">
    <p class="c-stalker-text">このエリア内では元のカーソルが消え、<br>丸いストーカーが追従します。</p>
    
    <div class="c-stalker-circle" id="stalker"></div>
  </div>
</div>

CSSコード表示

.c-stalker-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.c-stalker-desc {
  text-align: center;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}
/* デモエリア */
.c-stalker-area {
  position: relative;
  height: 300px;
  background-color: #ffffff;
  border: 2px solid #adb5bd;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* ★ポイント1：元々のカーソルを消す */
  cursor: none; 
}
.c-stalker-text {
  color: #555;
  font-weight: bold;
  text-align: center;
  line-height: 1.6;
  /* ★ポイント2：文字の上にマウスが乗っても邪魔しないようにする */
  pointer-events: none; 
}
/* 追従する丸い図形（CSSで作っておく） */
.c-stalker-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  /* ★ポイント3：フワッと遅れてついてくるアニメーション設定 */
  transition: transform 0.15s ease-out; 
  /* ストーカー自身がクリックの邪魔にならないようにする */
  pointer-events: none; 
  /* 初期は画面外へ */
  transform: translate(-100px, -100px); 
  z-index: 999;
}

JavaScriptコード表示

// JSの処理：マウスの動きに合わせて丸を移動させる
document.addEventListener('DOMContentLoaded', function() {
  const stalker = document.getElementById('stalker');
  const area = document.getElementById('stalker-area');
  // エリア内でマウスが動いた時の処理
  area.addEventListener('mousemove', function(e) {
    // エリアの左上を基準にしたマウスの座標を計算
    const rect = area.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    // 丸の中心がマウスの位置にくるように微調整（幅・高さの半分を引く）
    stalker.style.transform = `translate(${x - 20}px, ${y - 20}px)`;
  });
  // エリアからマウスが出たらストーカーを隠す
  area.addEventListener('mouseleave', function() {
    stalker.style.transform = 'translate(-100px, -100px)';
  });
});

クリックを促す波紋（リップル）エフェクト

例えば、ボタンにマウスを乗せた時（ホバー時）にカーソルから「波紋」が広がるような表現があります。

これもカーソル自体を変更しているわけではなく、CSSの::after（擬似要素）とアニメーションを組み合わせて作られています。

ボタンにマウスを乗せてください（hover）

HTMLコード表示

<div class="c-ripple-wrapper">
  <p class="c-ripple-desc">ボタンにマウスを乗せてください（hover）</p>

  <div class="c-ripple-demo-area">
    <button class="c-ripple-btn">
      詳細を見る
    </button>
  </div>
</div>

CSSコード表示

.c-ripple-wrapper {
  background-color: #f8f9fa;
  padding: 30px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.c-ripple-desc {
  text-align: center;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}
.c-ripple-demo-area {
  display: flex;
  justify-content: center;
  height: 100px;
  align-items: center;
}
/* 波紋ボタンの基本スタイル */
.c-ripple-btn {
  position: relative;
  background-color: #e91e63;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  padding: 15px 40px;
  border: none;
  border-radius: 30px;
  cursor: pointer; /* もちろんpointerは必須 */
  overflow: hidden; /* 波紋がボタンからはみ出さないようにする */
  z-index: 1;
  transition: 0.3s;
}
/* 波紋の元になる丸（初期状態は小さくて透明） */
.c-ripple-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  /* 中心から広がるように微調整 */
  transform: translate(-50%, -50%); 
  transition: width 0.6s ease-out, height 0.6s ease-out, opacity 0.6s;
  z-index: -1; /* 文字の後ろで広がるようにする */
  opacity: 1;
}
/* マウスが乗った時（波紋を大きく広げて、最後に透明にして消す） */
.c-ripple-btn:hover::after {
  width: 300px; /* ボタンを覆い尽くすサイズまで広げる */
  height: 300px;
  opacity: 0; /* 広がりながら消えていく */
}