■ マウスポインタの形を変える

スタイルシートの「cursor」というプロパティを使えば、
設定した要素の上にマウスポインタがあるとき、ポインタの形を指定したものに変更できます。

IEではリンク部分にマウスを置くと「指の形」になりますが、これを変えてみるのもおもしろいかもしれませんね。
ワンポイントとして使ってみてください。

★ 「こんな形」の上にマウスカーソルを合わせてみてください

値：ポインタの形：実際の形：ソース：
crosshair十字型 こんな形<span style="cursor:crosshair;"></span>
pointerリンク（指の形） こんな形<span style="cursor:pointer;"></span>
textテキスト選択状態 こんな形<span style="cursor:text;"></span>
wait処理待ち状態（時計） こんな形<span style="cursor:wait;"></span>
helpヘルプが利用できることを示す こんな形<span style="cursor:help;"></span>
move動かせるものを示す こんな形<span style="cursor:move;"></span>
n-resize上辺が動かせることを示す こんな形<span style="cursor:n-resize;"></span>
s-resize下辺が動かせることを示す こんな形<span style="cursor:s-resize;"></span>
w-resize左辺が動かせることを示す こんな形<span style="cursor:w-resize;"></span>
e-resize右辺が動かせることを示す こんな形<span style="cursor:e-resize;"></span>
nw-resize左上に動かせることを示す こんな形<span style="cursor:nw-resize;"></span>
ne-resize右上に動かせることを示す こんな形<span style="cursor:ne-resize;"></span>
sw-resize左下に動かせることを示す こんな形<span style="cursor:sw-resize;"></span>
se-resize右下に動かせることを示す こんな形<span style="cursor:se-resize;"></span>
url("")指定先のURLのデータをカーソルにする こんな形<span style="cursor:url("");"></span>
default特に指定がないときのデフォルトの形 こんな形<span style="cursor:default;"></span>
auto状況に応じてカーソルが自動選択（初期値） こんな形<span style="cursor:auto;"></span>


・勘違いされている方が多いですが、これは「A」（リンクタグ）以外でも使えます（全要素に使用可）
・各キーワードのポインタの形は、ＯＳやブラウザの種類によって少し異なります。
　例えば「n-resize」はMacや一部ブラウザでは上矢印ですが、WindowsのIEでは上下矢印になります。
・値「url」は正式なCSS仕様ですが、現時点で対応しているブラウザはないようです。
　これが使えるようになると、ＯＳやブラウザの問題もなくなりますし、オリジナル性も発揮できるのですが、、
[ → BACK ]