CSS3

プロパティ

cursor

→●、mdn

マウス ポインターのスタイル。

このプロパティは、［ポインタ指示装置用のカーソルのホット スポットが、要素のボーダー辺の中を指している］ときに表示される、カーソルの型を指定する。

複数の要素が重なり合っている場合、カーソルの型を決定する要素は、接触判定に基づく — すなわち、その位置からの click イベントを受け取る要素になる。

ユーザー エージェントは、次に挙げるようなユーザー エージェント コントロール上では、cursor プロパティを無視してもよい： スクロール バー、リサイズ用つまみ、その他、例えばフォーム要素用にユーザー エージェントに特有な実装の内部で利用され得るような、ネイティブ ユーザー インタフェース ウィジェットなど。ユーザー エージェントはまた、ユーザー インタフェースにおける種々の状態を指示するためとして、cursor プロパティを無視して 自身が選んだカーソルを表示してもよい ― ページが応答できないときには busy カーソル、利用者がテキスト選択を行なっているときにはテキスト カーソル、等々。

注記： [HTML] は、画像マップにおける cursor プロパティ用に 特別な取り扱い を定義している。

各種 値の意味は：

【キーワード値に対しては、［サンプル］にマウスを重ねると、利用中のユーザー エージェントによるカーソルが示される。】

画像カーソル

<url> ○［サンプル］←画像サンプル表示¶[Edge]×、[Chrome]×、[IE11]×。16×16の.jpg、透過.png、透過.gif、.svg、.ico、.curでやってみたが×。

ユーザー エージェントは URI が指名するリソースから、カーソルを検索取得する。ユーザー エージェントは、カーソル リストの最初のカーソルを取り扱えない場合は その次の URI を、それも取り扱えない場合は その次の URI を、等々、順に試みるものとする。ユーザー エージェントが、どの利用者定義なカーソルも取り扱えない場合、リストの終端のカーソル キーワードを利用するものとする。適合ユーザー エージェントは、<url> の代わりに、その上位拡張である <image> をサポートしてもよい。

ユーザー エージェントは、次の画像ファイル形式をサポートするものとする：

• PNG [PNG]
• セキュア静的モード [SVG2] 下における SVG [SVG11] のうち、生来なサイズを有するもの。
• background-image プロパティなどの他のプロパティにおける <image> 用にサポートされる、他のアニメートされない画像ファイル形式

加えて、ユーザー エージェントは、次の画像ファイル形式をサポートするべきである：

• セキュア アニメート化モード [SVG2] 下における SVG [SVG11] のうち、生来なサイズを有するもの。
• background-image プロパティなどの他のプロパティにおける <image> 用にサポートされる，他のアニメートされる画像ファイル形式

ユーザー エージェントは、他のファイル形式を追加でサポートしてもよい ― ［セキュア静的モード／セキュア アニメート化モード］[SVG2] 下にあるが、生来なサイズを有さない SVG [SVG11] も含め。

注記： CSS WG は、初期時は、生来なサイズの有無を問わず すべての SVG をサポートするものと意図していたが、実装の欠如に因り、生来なサイズを有さない SVG は 義務的から任意選択に格下げされた。

注記： この仕様が書かれた時点では（ 2015 年 春）、よくあるデスクトップ ブラウザが カーソル用にサポートしているファイル形式は、Microsoft が設計した［ .ico、および .cur ］の他にない。旧来の内容との互換性をとるため、UA には、これらをサポートすることが奨励される ― オープンな仕様がないため、これらの形式についての規範的な要件は作り得ないが。Wikipedia にて，ある程度の情報を見られる。

カーソル画像用の既定のオブジェクトサイズは、ユーザー エージェントが定義する ― そのサイズは、ユーザー エージェントの OS にて代表的なカーソルのサイズに基づくべきである。

具象オブジェクト サイズは、既定のサイズ法アルゴリズムを利用して決定される。OS が、所与のサイズを超えるカーソルを描画する能力を欠く場合、そのサイズより大きいカーソルは ― カーソル画像が生来な縦横比を有するならば、それは保守しつつ ― OS がサポートする限界域サイズまで縮短されるものとする。

<x>、<y>

<x>、<y> 座標（省略可能）は、画像の中の正確なポインター位置（ホット スポット）を識別する。

いずれも <number> である。カーソルの座標系における（左端、上端に相対的な）位置の x、y 座標は、画像内でポインタが指す精確な位置を表現する。

注記： この仕様は、種々の型の <image> 用に座標系を確立する方法は定義しない。それらの定義は [CSS4-IMAGES] まで先送りされる。

値が未指定な場合、利用された画像リソースの内部で定義される、生来なホット スポットになる。そのホット スポットも定義されていない場合の効果は、値 0 0 が指定されたかのようになる。

ホット スポットの座標が ― 画像リソースの内部か、<x>、<y> 値のいずれで指定されるにせよ ― カーソル画像の外側に出る場合、内側に入るように（x、y について独立に）切り詰めるものとする。

一般用カーソル

auto［サンプル］

ユーザー エージェントは、現在の文脈に基づいて、表示するカーソルを決定する。具体的には、［選択可能なテキスト／編集可能な要素］上では text、他では default のようにふるまう。

注記： ［選択可能なテキスト／編集可能な要素］上では、ユーザー エージェントは ― text のときと同じく ― 要素の書字モードに応じて、［ 縦方向、横方向 ］のうち適切な方のテキスト カーソルを利用するものとする ― また、変形や他の視覚効果も織り込んでもよい。

default［サンプル］

プラットフォームに依存する既定のカーソル。矢印として描画されることが多い。

none［サンプル］

要素に対してはカーソルは描画されない。

リンク／状態を表すカーソル

context-menu［サンプル］

カーソルが指すオブジェクトにて、文脈メニューが可用であることを指示する。メニューに似た小さなグラフィックを傍に伴う、矢印として描画されることが多い。

help［サンプル］

カーソルが指すオブジェクトにて、ヘルプが可用であることを指示する。疑問符やバルーンとして描画されることが多い。

pointer［サンプル］

リンクを指示するポインター カーソル。人差し指を立てた手の甲として描画されることが多い。

他が指定されない限り、ユーザー エージェントは、自身がサポートする すべての文書形式において、ハイパーリンク用の cursor にはこの値を ― ユーザー エージェント スタイルシートに通常の宣言を利用することを介して ― 適用するものとする。

作者は、リンクに対しては pointer を利用するべきである。また、他の対話的な要素にも利用してよい。

progress［サンプル］

プログラムが何らかの処理を遂行していて、進捗中にあることを指示する。利用者はプログラムとやりとりできることを表す点で wait と異なる。回転するビーチボール、あるいは 腕時計／砂時計を伴う矢印として描画されることが多い。

wait［サンプル］

プログラムが処理中“busy”にあり、利用者は待機すべきであることを指示する。腕時計や砂時計として描画されることが多い。

選択カーソル

cell［サンプル］

利用者は いくつかのセルを選択できることを指示する。真中にドットを伴う、太めの正符号として描画されることが多い。

crosshair［サンプル］

単純な極細十字線。二次元ビットマップ選択モードを指示するために利用されることが多い。

text［サンプル］

利用者は、テキストを選択できることを指示する。I-beam として描画されることが多い。ユーザー エージェントは、要素の書字モードに応じて、［横書きならば縦方向／縦書きならば横方向］の I-beam 等カーソルを自動的に表示するものとする（例： 後者は vertical-text 用のそれと同じにするなど）。加えて、ユーザー エージェントは、横方向、縦方向どっちのカーソルか選ぶときに、変形（ [CSS-TRANSFORMS-1] ）や他の視覚効果（§ パス上のテキスト [SVG2] など）を加味してもよい。

vertical-text［サンプル］

利用者は、縦書きテキストを選択できることを指示する。横方向 I-beam として描画されることが多い。

ドラッグ＆ドロップ カーソル

alias［サンプル］

何かのエイリアス／何かへのショートカットが作成されることになることを指示する。曲がった小さな矢印を傍に伴う、矢印として描画されることが多い。

copy［サンプル］

何かが複製されることになることを指示する。小さな正符号を傍に伴う、矢印として描画されることが多い。

move［サンプル］

移動されることになる何かを指示する。

no-drop［サンプル］

ドラッグ中のアイテムは、カーソルが現在 指す所にはドロップできないことを指示する。打ち消し線を伴う小さな円を伴う［手／ポインタ］として描画されることが多い。

not-allowed［サンプル］

要請された動作は、遂げられないことを指示する。打ち消し線を伴う円として描画されることが多い。

grab［サンプル］

何かを掴める（ドラッグ／移動できる）ことを指示する。開いた手の甲の様に描画されることが多い。

grabbing［サンプル］

何かを掴んでいる（ドラッグ／移動している）ことを指示する。閉じた手の甲の様に描画されることが多い。

リサイズ／スクロール時のカーソル（括弧内の矢印は方向を表す）

e-resize［サンプル］（→）、
n-resize［サンプル］（↑）、
ne-resize［サンプル］（↗）、
nw-resize［サンプル］（↖）、
s-resize［サンプル］（↓）、
se-resize［サンプル］（↘）、
sw-resize［サンプル］（↙）、
w-resize［サンプル］（←）

ある辺が移動されることを指示する。例えば、ボックスの右下隅（南東 ― south‐east）から動き始めるときは、se-resize カーソルが利用される。

ew-resize［サンプル］（←→）、
ns-resize［サンプル］（↑↓）、
nesw-resize［サンプル］（↙↗）、
nwse-resize［サンプル］（↖↘）

双方向リサイズ カーソルを指示する。

col-resize［サンプル］（←→）

アイテムやカラムを横方向にリサイズできることを指示する。左右を指す矢印に、それらを分離する縦バーが伴われて描画されることが多い。

row-resize［サンプル］（↑↓）

アイテムやカラムを縦方向にリサイズできることを指示する。上下を指す矢印に、それらを分離する横バーが伴われて描画されることが多い。

all-scroll［サンプル］

何かを、どの方向にもスクロールできることを指示する。真中にドットを伴う、上下左右を指す矢印として描画されることが多い。

ズーム用のカーソル

zoom-in［サンプル］、
zoom-out［サンプル］

何かを内外へズーム（拡大縮小）できることを指示する。中心に［ "+" （ zoom-in のとき）／"-"（ zoom-out のとき）］を伴う、拡大鏡の様に描画されることが多い。

:link,:visited{
  cursor: url(example.svg#linkcursor),
          url(hyper.cur),
          url(hyper.png) 2 3,
          pointer
}

テスト