ホームページ作成(マウスで変化)
無料!発信中!メール情報誌!

ホームページ作成しよう!
HTML〜スタイルシート

ホームページ作成TOP > マウスで変化 > マウスの形状を変更する

マウスの形状を変更する

マウスの形状を、リンク部分や、その他の場所に来た時などの場合に変更する方法です。

マウスの形状こんな感じにできますよ。 → ホームページ作成(マウス形状)

sample

 ↓ 下の表にマウスを重ねて見て下さい。 ↓ 

auto
(自動)
default
(通常の選択)
pointer
(リンクの選択)
inherit
(継承)
text
(テキスト選択)
wait
(待ち状態)
help
(ヘルプの選択)
crosshair
(領域選択)

nw-resize
(左上拡大縮小)
n-resize
(上拡大縮小)
ne-resize
(右上拡大縮小)
w-resize
(左拡大縮小)
move
(移動)
e-resize
(右拡大縮小)
sw-resize
(左下拡大縮小)
s-resize
(下拡大縮小)
se-resize
(右下拡大縮小)
HTML 

マウスの形状を変更するには、スタイルシートを使用します。

ホームページ作成TOP > マウスで変化 > マウスの形状を変更する > このページのTOP ▲

スタイルシート cursor:状態

マウスの形状を変更するには、その範囲にマウスが来た時にcursor:状態のスタイルが適用される様に、その範囲に対して設定します。

cursor:状態の状態には、上記のキーワードをそれぞれ入れます。

スタイルの部分だけ抜き出すと下記の様になります。

要素に直接書く
書き方は

style="cursor:auto"
style="cursor:default"
style="cursor:pointer"
style="cursor:inherit"
style="cursor:text"
style="cursor:wait"
style="cursor:help"
style="cursor:crosshair"
style="cursor:nw-resize"
style="cursor:n-resize"
style="cursor:ne-resize"
style="cursor:w-resize"
style="cursor:move"
style="cursor:e-resize"
style="cursor:sw-resize"
style="cursor:s-resize"
style="cursor:se-resize"

ホームページ作成TOP > マウスで変化 > マウスの形状を変更する > このページのTOP ▲