スタイルシートの技

指定した部分の上にマウスが乗った時のカーソルを変更したい (Internet Explorer 4.0~)

リンクにカーソルが乗った時や、画像上にカーソルが移動した時とかにカーソルを変更する事ができます。 Internet Explorer 4.0以上の機能ですが、最近のNetscape NavigatorやOperaでも動作するそうです。 カーソルには基本15種類存在します。その多くはみなさんが良く見ているカーソルだと思います。 カーソルをスタイルシートで指定するには、以下のように記述します。

cursor: [カーソル種類];

下のボックス内にカーソルを持って行って見てください。ブラウザが対応しているのであればカーソルが切り替わるはずです。 一番下(三段目)の背景色が薄黄色のカーソルはInternet Explorer 6.0で対応したカーソルです。 スタイルシートで適応する場合には、英語部分がカーソル種類となります。

default
デフォルト
hand
指先
crosshair
十字
move
移動
e-resize
右矢印
ne-resize
右上矢印
n-resize
上矢印
nw-resize
左上矢印
w-resize
左矢印
sw-resize
左下矢印
s-resize
下矢印
se-resize
右下矢印
text
テキスト
wait
待機
help
ヘルプ
pointer
指先
no-drop
指先禁止
vertical-text
I-水平版
colsize
横幅調整
progress
処理進行
not-allowe
禁止
all-scroll
スクロール
row-resize
縦幅調整

また、「Internet Explorer 6.0」では自作のカーソルを使う事もできるようになっており、 「*.cur」「*.ani」形式のものに対応してます。例えば「mycursor.cur」というカーソルがあれば、

*.mycursor
{
    cursor: url('mycursor.cur') ;
}

このように背景画像などと同じ指定の方法で自作、またはネット上で 公開されているカーソルなどを利用する事も可能です。