cursor【マウスカーソル】

メモ 構文 (動的変更あり) 例 (動的変更あり) 関連

メモ

  • マウスカーソルの定義
    • 下記構文で、実際のマウスカーソル確認可

構文 (※記述方法)

プロパティ値 (※各行でマウスカーソル変化)
cursor: [ [<uri【画像リソース (有効リソースを順に検索)】> ,]*
  [    auto【自動】
      | crosshair【十字】
      | default【デフォルト】
      | pointer【ポインタ】
      | move【移動】
      | e-resize【右方向のリサイズ】
      | ne-resize【右上方向のリサイズ】
      | nw-resize【左上方向のリサイズ】
      | n-resize【上方向のリサイズ】
      | se-resize【右下方向のリサイズ】
      | sw-resize【左下方向のリサイズ】
      | s-resize【下方向のリサイズ】
      | w-resize【左方向のリサイズ】
      | text【テキスト】
      | wait【待機】
      | help【ヘルプ】
      | progress【進行中】
  ]
]
cursor:
<x>・<y>：
詳細定義なし 		[ [<url【画像リソース (有効リソースを順に検索)】>
     [<x【ホットスポットのx座標 (単位なし)】>
        <y【ホットスポットのy座標 (単位なし)】>
     ]?
 , ]*
   [   auto【自動】
      | default【デフォルト】
      | none【なし】
      | context-menu【コンテキストメニュー】
      | help【ヘルプ】
      | pointer【ポインタ】
      | progress【進行中】
      | wait【待機】
      | cell【セル】
      | crosshair【十字】
      | text【テキスト】
      | vertical-text【縦書きテキスト】
      | alias【エイリアス/ショートカット】
      | copy【コピー】
      | move【移動】
      | no-drop【ドロップ禁止】
      | not-allowed【操作禁止】
      | grab【ドラッグ】
      | grabbing【ドラッグ中】
      | e-resize【右方向のリサイズ】
      | n-resize【上方向のリサイズ】
      | ne-resize【右上方向のリサイズ】
      | nw-resize【左上方向のリサイズ】
      | s-resize【下方向のリサイズ】
      | se-resize【右下方向のリサイズ】
      | sw-resize【左下方向のリサイズ】
      | w-resize【左方向のリサイズ】
      | ew-resize【左右方向のリサイズ】
      | ns-resize【上下方向のリサイズ】
      | nesw-resize【右上-左下方向のリサイズ】
      | nwse-resize【左上-右下方向のリサイズ】
      | col-resize【列のリサイズ】
      | row-resize【行のリサイズ】
      | all-scroll【任意の方向にスクロール】
      | zoom-in【ズームイン】
      | zoom-out【ズームアウト】
  ]
]

例

<style>
.border { border:1px red solid; width:200px; height:100px; }
.resource { cursor:url('./image/sample-4color.gif'), pointer; }
.pointer { cursor:pointer; }
</style>

<p class="border resource">画像リソース<br>cursor:url('～.gif'), pointer</p>
<p class="border pointer">ポインタ<br>cursor:pointer</p>

画像リソース
cursor:url('～.gif'), pointer

ポインタ
cursor:pointer