HOME > Tips > CSS > カーソルでイメージを使う

カーソルでイメージを使う

  • Author:920

CSSでマウスカーソルの形状が変更できます。

  • selecte {
  •      cursor: pointer;
  • }
auto
自動(デフォルト)
default
標準
pointer
リンク
crosshair
十字
move
移動
text
テキスト
wait
処理中
help
ヘルプ
n-resize
上リサイズ
e-resize
右リサイズ
s-resize
下リサイズ
w-resize
左リサイズ
ne-resize
右上リサイズ
se-resize
右下リサイズ
sw-resize
左下リサイズ
nw-resize
左上リサイズ

<IEの拡張>

col-resize
左右リサイズ
row-resize
上下リサイズ
all-scroll
上下左右スクロール
not-allowed
不可
no-drop
ドロップ不可
progress
処理中
vertical-text
縦書テキスト

また、決められた形状だけではなくカーソルとしてイメージを使用することもできます。

  • selecte {
  •      cursor: url(example.cur), pointer;
  • }

カーソルにイメージを使用する場合は、イメージが表示できないときの代替として、「auto」・「default」・「pointer」などのキーワードを指定します。

Firefoxでは、このキーワードを指定しないと、動作しないようです。

  • selecte {
  •      cursor: url(example.cur), pointer;
  • }

<注意>

IEでは、イメージのパスがhtmlファイルからのパスになります。(ルート相対が使用できれば、ルート相対を使用するのが無難?)

カンマ「,」で区切って複数のカーソル候補を設定しておくこともできます。

この場合、ユーザー環境で表示できる形式のファイルが使用されます。候補の優先順位は、左から順に右へと続きます。

  • selecte {
  •      cursor: url(example.cur), url(example.gif), text;
  • }
UP