CSS cursor一覧とpointer-events:noneでクリック無効

cursorは「要素の上でマウスカーソルをどの形にするか」を決めるプロパティ、pointer-eventsは「その要素がマウスやタッチの対象になるかどうか」を決めるプロパティです。 cursor: pointer でクリックできることを伝え、pointer-events: none でクリックを受け付けなくする、という形でセットで使われます。

この記事では、cursor のキーワード全36値を用途別の一覧表にし、ブラウザで開いてマウスを当てれば形を確かめられるコピペ用のHTMLを載せました。さらに、pointer-events: none と cursor: not-allowed を同じ要素に書くとカーソルが変わらない現象を実際に確かめ、親子に分けて解決するコードを示します。pointer-events: none は Tab キーと Enter キーでは押せてしまうため、disabled・inert・aria-disabled との違いも比較表にまとめています。

cursorとpointer-eventsの早見表

よく使う cursor の値

pointer-events の値

クリックを無効にする4つの方法

この記事で確かめた環境

動作の確認は、Playwright 1.56.0 から起動した Chromium 141.0.7390.37（Linux、画面なしのヘッドレス実行）で行いました。確かめた内容は次のとおりです。

• cursor の36個のキーワードが有効な値として受け付けられること（CSS.supports で判定）
• マウスの位置でどの要素が対象になるか（document.elementFromPoint）と、その要素の cursor の計算値
• マウスのクリック、キーボードの Tab と Enter、JavaScript の click() と focus() でイベントが起きるかどうか

ヘッドレス実行のため、カーソルの絵そのものは目で見ていません。形の説明は MDN の cursor のページ（今回開いて確認）の記述に基づいています。Firefox と Safari、Windows や macOS での表示は未実行です。

cursor の全値一覧（36個）

MDN の cursor のページに載っているキーワードは次の36個です。Chromium 141 では36個すべてが有効な値として受け付けられました。形は OS やブラウザによって少し異なるため、表の「形」は一般的な表示です。

基本

リンクと状態

選択

ドラッグ＆ドロップ

サイズ変更とスクロール

n・e・s・w は北・東・南・西の頭文字で、画面の上・右・下・左に対応します。環境によっては n-resize と ns-resize が同じ両矢印で表示されることがあります。

拡大と縮小

コピペで確かめる：cursor 一覧のHTML

次のHTMLを cursors.html という名前で保存してブラウザで開くと、36個のマスが並びます。マスにマウスを当てると、その値のカーソルに変わるので、手元の OS とブラウザでの形をそのまま確かめられます。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>cursor 一覧</title>
<style>
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .grid div { padding: 16px 8px; border: 1px solid #ccc; border-radius: 6px; text-align: center; font: 14px/1.2 monospace; }
  .grid div:hover { background: #eef6ff; }
</style>
</head>
<body>
<h1>cursor 一覧（マウスを当てて確認）</h1>
<div class="grid" id="grid"></div>
<script>
  const values = [
    "auto", "default", "none",
    "context-menu", "help", "pointer", "progress", "wait",
    "cell", "crosshair", "text", "vertical-text",
    "alias", "copy", "move", "no-drop", "not-allowed", "grab", "grabbing",
    "all-scroll", "col-resize", "row-resize",
    "n-resize", "e-resize", "s-resize", "w-resize",
    "ne-resize", "nw-resize", "se-resize", "sw-resize",
    "ew-resize", "ns-resize", "nesw-resize", "nwse-resize",
    "zoom-in", "zoom-out"
  ];
  const grid = document.getElementById("grid");
  for (const v of values) {
    const cell = document.createElement("div");
    cell.textContent = v;
    cell.style.cursor = v;
    grid.append(cell);
  }
</script>
</body>
</html>

このファイルを Chromium 141 で開き、36個のマスが作られ、それぞれの cursor の計算値がマスの文字と一致することを確認しました。

cursor の使い方と書き方

要素ごとの初期状態

cursor を指定していないとき、要素ごとにどの値になるかを Chromium 141 で調べました。

リンクは最初から pointer ですが、button は default（矢印）のままです。ボタンにも指さしの手を出したいときは、自分で指定します。

button,
[role="button"],
summary,
label[for] {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

disabled のボタンに cursor: not-allowed を指定した場合、マウスを当てた位置の対象はそのボタン自身で、計算値も not-allowed になることを確認しました。disabled は pointer-events: none と違い、カーソルの指定がそのまま効きます。

画像をカーソルにする（url）

.stamp-area {
  cursor: url("stamp.png") 4 12, crosshair;
}

url() の後ろの2つの数字は、画像の左上を 0 0 としたときの「クリック位置（ホットスポット）」です。最後にキーワードを1つ書くことが必須で、画像が読み込めないときはそのキーワードが使われます。Chromium 141 での判定は次のとおりでした。

カンマで区切って複数の画像を並べると、左から順に使えるものが選ばれます。

状態に合わせて切り替える

.card        { cursor: grab; }
.card:active { cursor: grabbing; }

.is-loading  { cursor: progress; }
.is-busy     { cursor: wait; }

cursor は見た目だけを変えるプロパティで、クリックできるかどうかには影響しません。cursor: not-allowed だけを指定したリンクは、クリックすると通常どおり移動しました。操作を止めるには、次に説明する pointer-events や属性を使います。

pointer-events の使い方

基本の動作

.no-click {
  pointer-events: none;
}

HTML の要素で使う値は auto（初期値）と none の2つです。MDN の pointer-events のページ（今回開いて確認）には、これ以外に visiblePainted・fill・stroke などの値が載っていますが、それらは SVG 用です。

pointer-events: none を指定したリンクとボタンについて、Chromium 141 で確かめた結果です。

止まるのはマウスやタッチなどポインターによる操作だけです。キーボードと JavaScript からの操作はそのまま通ります。MDN にも、pointer-events: none の要素は Tab キーによる順送りのフォーカスを受け取る、と書かれています。

クリックは下の要素に届く

none を指定した要素は対象から外れるので、その下に重なっている要素がクリックやホバーの対象になります。これを利用すると、上に重ねた装飾を「すり抜け」させられます。

<button id="under">下のボタン</button>
<div class="overlay"></div>

#under   { position: absolute; top: 0; left: 0; width: 200px; height: 40px; cursor: pointer; }
.overlay { position: absolute; top: 0; left: 0; width: 200px; height: 40px;
           background: rgba(0, 0, 0, .2); pointer-events: none; }

重なった位置でマウスの対象を調べると下のボタンが返り、クリックすると下のボタンの click イベントが起きました。グラデーションの重ね、画像の上の飾り枠、透かし文字など、見せるだけの要素に向いた使い方です。

子に継承される。子だけ auto に戻せる

pointer-events は継承されるプロパティです。親に none を指定すると、子もまとめて対象から外れます。子に auto を指定すれば、その子だけ対象に戻せます。

<div class="layer">
  <div class="toast">通知メッセージ（ここだけ押せる）</div>
</div>
<button class="behind">背面のボタン</button>

.layer  { position: fixed; inset: 0; pointer-events: none; }
.toast  { position: absolute; right: 16px; bottom: 16px; pointer-events: auto; cursor: pointer; }
.behind { position: fixed; left: 16px; bottom: 16px; }

画面全体を覆う .layer があっても、背面のボタンはクリックでき（click イベントが1回起きることを確認）、.toast の上では対象が .toast になり cursor も pointer でした。通知やフローティングの部品を、背面の操作を妨げずに重ねたいときの定番の形です。

なお、子を auto に戻した場合、子で起きたクリックは親へ伝わっていきます。親に付けたイベントリスナーは、子がクリックされると呼ばれました。「親に none を付けたから親のリスナーは絶対に動かない」わけではない点を覚えておくと、調査のときに役立ちます。

pointer-events:none と cursor:not-allowed を同じ要素に書くとカーソルが変わらない

「押せないことをカーソルでも伝えたい」と考えて、次のように書くことがあります。

/* 直す前：同じ要素に両方を書く */
.link-off {
  pointer-events: none;
  cursor: not-allowed;
  opacity: .5;
}

この指定では、マウスを当ててもカーソルは not-allowed になりません。Chromium 141 で確かめた結果です。

カーソルの形は「マウスの対象になっている要素」の cursor で決まります。pointer-events: none の要素は対象にならないので、その要素に書いた cursor は使われず、下にある要素の cursor が表示される、という仕組みです。指定が打ち消されたのではなく、出番がなくなっています。

解決：親に cursor、子に pointer-events

外側に1つ要素を足し、役割を分けます。

<span class="off-wrap">
  <a href="/next" tabindex="-1" aria-disabled="true">次へ</a>
</span>

/* 直した後：親に cursor、子に pointer-events */
.off-wrap {
  display: inline-block;
  cursor: not-allowed;
}
.off-wrap > a {
  pointer-events: none;
  opacity: .5;
}

子のリンクは対象から外れ、マウスは親の .off-wrap に当たるので、親の cursor: not-allowed が表示に使われます。あわせて tabindex="-1" で Tab キーの移動先から外し、aria-disabled="true" で読み上げソフトにも無効であることを伝えています。

フォーム部品であれば、disabled 属性を使うほうが簡単です。disabled の要素はマウスの対象のままなので、button:disabled { cursor: not-allowed; } の1行でカーソルが変わります。

disabled・inert・aria-disabled との違い

「クリックを無効にする」方法は4つあり、止まる範囲が違います。同じページにボタンを並べ、Chromium 141 で1つずつ確かめました。

表から読み取れるポイントは次のとおりです。

• キーボードでも確実に止めたいなら disabled か inert。 pointer-events: none と aria-disabled は、どちらも Enter キーで実行されます。
• disabled は JavaScript の click() も止める唯一の方法でした。inert はマウスとフォーカスを止めますが、click() を直接呼ぶと click イベントは起きました。
• aria-disabled は「伝えるだけ」で、動作は何も止めません。止める処理は JavaScript で書きます。
• fieldset に disabled を付けると、中のボタンや入力欄がまとめて無効になります。中のボタンは :disabled に一致し、クリックも focus() も受け付けませんでした。

どれを選ぶかの判断表

a 要素には disabled 属性がありません。リンクを無効にしたいときは、href 属性を外すとリンクとして扱われなくなり、クリックも Tab キーでの移動も起きなくなります。Chromium 141 でも、href のない a 要素は focus() でフォーカスできず、cursor の計算値も auto で、リンク用の疑似クラス :any-link に一致しないことを確認しました。

aria-disabled と JavaScript で「押せるが実行しない」ボタンを作る

disabled のボタンはフォーカスできないため、キーボードや読み上げソフトの利用者が「ボタンがあること」「なぜ押せないか」に気づきにくい場合があります。フォーカスを残したいときは aria-disabled を使い、処理を JavaScript で止めます。

<button id="save" type="button" aria-disabled="true">保存</button>
<span id="msg" role="status"></span>

[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .5;
}

const save = document.getElementById("save");
save.addEventListener("click", (e) => {
  if (save.getAttribute("aria-disabled") === "true") {
    e.preventDefault();
    document.getElementById("msg").textContent = "必須項目を入力すると保存できます";
    return;
  }
  document.getElementById("msg").textContent = "保存しました";
});

Chromium 141 で、aria-disabled="true" のままフォーカスして Enter を押すと「必須項目を入力すると保存できます」が表示され、属性を false に変えてクリックすると「保存しました」が表示されることを確認しました。この方法では pointer-events: none を使っていないので、cursor: not-allowed もそのまま効きます。

モーダルの背面を inert でまとめて止める

<main id="page" inert>
  <a href="/list">一覧へ</a>
  <button type="button">編集</button>
</main>
<div role="dialog" aria-modal="true" aria-label="確認">
  <p>保存しますか？</p>
  <button type="button">保存する</button>
</div>

inert を付けた要素の中は、マウスの対象にならず、focus() でもフォーカスできず、Tab キーでも止まりませんでした。モーダルを閉じるときに inert 属性を外せば元に戻ります。inert の中にあるリンクに cursor: pointer を指定しても、マウスの対象が外側の要素になるため、pointer-events: none と同じくカーソルは変わりませんでした。

目的別のコピペ用コード

現在のページのリンクを押せなくする

<nav>
  <a href="/">ホーム</a>
  <a href="/articles" aria-current="page">記事</a>
  <a href="/about">会社情報</a>
</nav>

nav a[aria-current="page"] {
  pointer-events: none;
  font-weight: bold;
  text-decoration: none;
}

クリックしてもページの移動が起きないことを確認しました。現在地のリンクは、押しても同じページが開くだけなので、Tab キーで到達できても支障がありません。こうした「止まらなくても困らない」場面が、pointer-events: none の得意な使いどころです。

送信中のボタンを無効にする

<form id="f">
  <input name="title" required>
  <button id="submit" type="submit">登録する</button>
</form>

#submit:disabled {
  cursor: progress;
  opacity: .6;
}

const form = document.getElementById("f");
const button = document.getElementById("submit");
form.addEventListener("submit", () => {
  button.disabled = true;
  button.textContent = "送信中…";
});

二重送信を防ぐ目的では、キーボードの Enter も止まる disabled を使います。Chromium 141 で、ボタンをクリックした直後に Enter キーとクリックをもう一度ずつ送っても、submit イベントは1回だけで、ボタンの文字が「送信中…」に変わることを確認しました（確認用に、ページ移動を止める処理を足しています）。通信が終わったら button.disabled = false で元に戻します。

アイコンがクリックを横取りしないようにする

ボタンの中に SVG のアイコンを入れると、クリックしたときの event.target がアイコンになることがあります。アイコン側を対象から外すと、常にボタンが対象になります。

button > svg,
button > img {
  pointer-events: none;
}

この指定を入れた状態で SVG の上をクリックすると、event.target がボタンになることを確認しました。event.target を見て処理を分けているコードや、data- 属性をボタンから読み取っているコードが安定します。

入力欄の上に置いたアイコンをすり抜けさせる

.search { position: relative; }
.search .icon {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  pointer-events: none;   /* アイコンの上をクリックしても入力欄にフォーカスが入る */
}
.search input { padding-left: 32px; }

アイコンの位置をクリックすると、下にある入力欄にフォーカスが入ることを確認しました。アイコンを label 要素で作って入力欄と結び付ける方法もありますが、飾りとして置くだけならこの1行で足ります。

文字を選択させたくないときは user-select

pointer-events: none を付けると、その要素の文字はマウスでなぞって選択することもできなくなります。「クリックは通したいが、文字の選択だけ止めたい」という場合は、別のプロパティである user-select: none を使います（今回は未実行です）。

.label-only {
  user-select: none;
}

うまく効かないときのチェックリスト

pointer-events: none の要素では :hover も title 属性のツールチップも働きません。無効なボタンに説明を出したいときは、外側の要素でホバーを受けるか、aria-disabled の方法に切り替えます。

よくある質問

Q. cursor: pointer は、すべてのボタンに付けるべきですか？ A. 決まりはありません。ブラウザの初期状態ではリンクだけが pointer で、ボタンは default です。押せる要素に pointer を付けて統一するサイトも多く、どちらの方針でも、サイト内でそろっていることが大切です。

Q. pointer-events: none を付ければ、ボタンを無効にしたことになりますか？ A. マウスとタッチでは押せなくなりますが、Tab キーでフォーカスして Enter を押すと実行されます。フォームの送信や削除など、実行されると困る操作には disabled を使い、サーバー側でも状態を確かめるのが確実です。

Q. スマートフォンでも cursor は関係ありますか？ A. タッチ操作ではカーソルが表示されないため、cursor の指定は見た目に影響しません。一方、pointer-events はタッチにも適用されます（タッチ端末での動作は今回未実行です）。押せない状態は、色や透明度、文言でも伝えるようにします。

Q. pointer-events: none の要素に付けたイベントリスナーは、絶対に呼ばれませんか？ A. マウスで直接その要素を対象にすることはできませんが、キーボードの Enter、JavaScript の click()、auto に戻した子からの伝播では呼ばれます。今回の確認でも、この3つのいずれでもリスナーが動きました。

まとめ

• cursor のキーワードは36個。 よく使うのは pointer・not-allowed・wait・progress・grab・text で、掲載した HTML を開けば手元の環境での形を確かめられます。
• リンクの初期状態は pointer、ボタンは default。 ボタンに手のカーソルを出すなら自分で指定します。
• pointer-events: none はマウスとタッチだけを止めます。 Tab と Enter、JavaScript の click() では実行されます。
• pointer-events: none と cursor を同じ要素に書くと、cursor は使われません。 親に cursor: not-allowed、子に pointer-events: none と分けると表示されます。
• キーボードも止めるなら disabled か inert。 disabled はフォーム部品用、inert は領域まるごと用です。
• aria-disabled は状態を伝えるだけなので、JavaScript で処理を止めます。フォーカスを残して理由を伝えたいときに向いています。
• 重ねた装飾をすり抜けさせる用途が、pointer-events: none の最も得意な場面です。

参考・出典

• MDN Web Docs「cursor」（今回開いて、キーワードの一覧と url の書き方を確認）
• MDN Web Docs「pointer-events」（今回開いて、値・継承・Tab キーでのフォーカスに関する記述を確認）

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。