★cursor（カーソル指定）

戻る

cursor（カーソル指定）

解説
カーソルを指定する属性です。
HTMLではリンク文字・画像にマウスカーソルが重なるとカーソルが変化します。このように、この属性は指定した要素に マウスカーソルが重なった場合、指定したカーソル（オリジナル・カーソル又はキーワードによるOS標準のカーソル）に変更できます。
　

値

  • オリジナル・カーソル
    <uri>

  • キーワード（OS標準のカーソル）
    auto：自動的に指定
    crosshair：十字カーソル
    default：標準カーソル
    pointer：リンクの選択カーソル
    move：移動カーソル
    e-resize：ウィンドウを右に拡大/縮小カーソル
    ne-resize：ウィンドウを右上に拡大/縮小カーソル
    nw-resize：ウィンドウを左上に拡大/縮小カーソル
    n-resize：ウィンドウを上に拡大/縮小カーソル
    se-resize：ウィンドウを右下に拡大/縮小カーソル
    sw-resize：ウィンドウを左下に拡大/縮小カーソル
    s-resize：ウィンドウを下に拡大/縮小カーソル
    w-resize：ウィンドウを左に拡大/縮小カーソル
    text：テキスト選択カーソル
    wait：待ち状態カーソル
    help： ヘルプの選択カーソル

    CSS Level2では、上記のように定義されてますが、
    Win98+E4以降では、pointerが下記のキーワードとなっています。

    hand：リンクの選択カーソル

オリジナル・カーソルは、０個以上の<uri>（カーソル・ファイルのパス）を , （カンマ）区切りで書き並べます。
オリジナル・カーソルを指定するならば、表示できない場合も考えて<uri>に続けて末尾にはキーワードを出来るだけ指定しましょう。
但し、現在のブラウザでオリジナル・カーソルに対応（確認済）しているのはE6のみです。

初期値

auto

%値の基準 　

適用

すべてのエレメント

継承

する

対応状況
<uri> 　 L2 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 E6
pointer 　 L2 　 N6 N7 O6 O7 ff1 NA1 GA1 MO1 K2 K3 　 　 　 　 　 E6
hand 　 L2 　 　 　 　 　 　 　 　 　 K2 K3 　 E4 E5 ME5 E55 E6
その他の値 　 L2 　 N6 N7 O6 O7 ff1 NA1 GA1 MO1 K2 K3 　 E4 E5 ME5 E55 E6
気をつけたいのはE6であれば問題ありませんが、IEと他のブラウザではリンクの選択カーソルの動作が違うことです。対策としてはデフォルトでpointerとしておきJavaScriptでブラウザ判定をしてhandを書き出すくらいでしょう。
使用例

ソース

表示＆操作

スタイル部に、

div{border:medium outset red;padding:0.5em;margin:0.5em;
background:pink;text-align:center; }
.auto{cursor:auto;}
.crosshair{cursor:crosshair;}
.default{cursor:default;}
.pointer{cursor:pointer;}
.hand{cursor:hand;}
.move{cursor:move;}
.e-resize{cursor:e-resize;}
.ne-resize{cursor:ne-resize;}
.nw-resize{cursor:nw-resize;}
.n-resize{cursor:n-resize;}
.se-resize{cursor:se-resize;}
.sw-resize{cursor:sw-resize;}
.s-resize{cursor:s-resize;}
.w-resize{cursor:w-resize;}
.text{cursor:text;}
.wait{cursor:wait;}
.help{cursor:help;}
.original{cursor:url(pen_dora.cur);}
.mycursor{cursor:url(pen_dora.ani),url(pen_dora.cur),text;}

と記述し、

自動的に指定
十字カーソル
標準カーソル
リンクの選択カーソル
リンクの選択カーソル
移動カーソル
右に拡大/縮小カーソル
右上に拡大/縮小カーソル
左上に拡大/縮小カーソル
上に拡大/縮小カーソル
右下に拡大/縮小カーソル
左下に拡大/縮小カーソル
下に拡大/縮小カーソル
左に拡大/縮小カーソル
テキスト選択カーソル
待ち状態カーソル
ヘルプの選択カーソル
オリジナル・カーソル
この様に列記しよう。

と表示されます。

body部に、

<div class="auto">自動的に指定</div>
<div class="crosshair">十字カーソル</div>
<div class="default">標準カーソル</div>
<div class="pointer">リンクの選択カーソル</div>
<div class="hand">リンクの選択カーソル</div>
<div class="move">移動カーソル</div>
<div class="e-resize">右に拡大/縮小カーソル</div>
<div class="ne-resize">右上に拡大/縮小カーソル</div>
<div class="nw-resize">左上に拡大/縮小カーソル</div>
<div class="n-resize">上に拡大/縮小カーソル</div>
<div class="se-resize">右下に拡大/縮小カーソル</div>
<div class="sw-resize">左下に拡大/縮小カーソル</div>
<div class="s-resize">下に拡大/縮小カーソル</div>
<div class="w-resize">左に拡大/縮小カーソル</div>
<div class="text">テキスト選択カーソル</div>
<div class="wait">待ち状態カーソル</div>
<div class="help">ヘルプの選択カーソル</div>
<div class="original">オリジナル・カーソル</div>
<div class="mycursor">この様に列記しよう。</div>

と記述すると。

Copyright (C) pokochan 2000-2005
http://www.tees.ne.jp/~pokochan/style/cursor.html
E-mailpokochan@mx1.tees.ne.jp