cursorプロパティは、マウスポインターを乗せた時に形状を変更する事ができるプロパティになります。
※オリジナルのポインタも指定可能
cursorプロパティ
記法
cursor : 形状のキーワード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title>cursorプロパティに関して</title>
</head>
<body>
<label>ボタンをホバーするとカーソルがpointerに切り替わります</label>
<div>
<button class="cursor" type="button" onclick="alert('アラート')">
ボタン
</button>
</div>
</body>
</html>.cursor {
cursor: pointer;
}
出力結果
オリジナルポインター
cursorプロパティ
記法
cursor : url(画像のパス) x座標 y座標, 形状のキーワード
※形状のキーワードは画像が表示されない場合に有効になる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title>cursorプロパティ(オリジナル)に関して</title>
</head>
<body>
<label>ボタンをホバーするとカーソルが切り替わります</label>
<div>
<button class="original-cursor" type="button" onclick="alert('アラート')">
ボタン
</button>
</div>
</body>
</html>.original-cursor {
cursor: url(https://10moji-blog.com/wp-content/uploads/2023/07/tomoji.png) 0 0, pointer;
}
出力結果
形状キーワード一覧
ブラウザによってポインターのデザインが少し変わる場合がある
| キーワード | ポインター |
|---|---|
| auto |
|
| default |
|
| text |
|
| pointer |
|
| copy |
|
| help |
|
| zoom-in |
|
| zoom-out |
|
| vertical-text |
|
| context-menu |
|
| grab |
|
| grabbing |
|
| cell |
|
| crosshair |
|
| no-drop |
|
| not-allowed |
|
| alias |
|
| キーワード | ポインター |
|---|---|
| wait |
|
| progress |
|
| move |
|
| all-scroll |
|
| col-resize |
|
| row-reasize |
|
| ew-riseze |  |
| ns-resize |  |
| news-riseze |  |
| nwse-riseze |  |
| n-riseze |  |
| s-riseze |  |
| e-riseze |  |
| w-riseze |  |
| ne-riseze |  |
| se-riseze |  |
| sw-riseze |  |
| nw-riseze |  |