ホームページ作成ＴＯＰ > マウスで変化 > マウスの形状を変更する
マウスの形状を変更する
マウスの形状を、リンク部分や、その他の場所に来た時などの場合に変更する方法です。
マウスの形状こんな感じにできますよ。 → 
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 （右下拡大縮小） |
ＨＴＭＬ
マウスの形状を変更するには、スタイルシートを使用します。
ホームページ作成ＴＯＰ > マウスで変化 > マウスの形状を変更する > このページのＴＯＰ ▲
スタイルシート 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"
ホームページ作成ＴＯＰ > マウスで変化 > マウスの形状を変更する > このページのＴＯＰ ▲
