CSS を使用してカーソルの外観を変更する
CSS カーソル プロパティを使用して、HTML ドキュメント内のさまざまな要素のカーソル画像を操作できます。
#SyntaxThe syntax of CSS cursor property is as follows:
Selector {
cursor: /*value*/
}ログイン後にコピー
以下は CSS カーソル プロパティの値です - The syntax of CSS cursor property is as follows:
Selector {
cursor: /*value*/
}| 値と説明 | < /th> |
|---|---|
| alias作成するもののエイリアスを示します | |
| フル スクロール任意の方向にスクロールできるコンテンツを表します | |
| 自動 デフォルトでは、ブラウザがカーソルを設定します | |
| Cell | は、セル (またはセルのグループ) を選択できることを意味します< /p>
|
| context-menu | < strong>コンテキスト メニューが利用可能であることを示します | # 6
| col-resize | 列のサイズを水平方向に変更できることを示します | 7
| Copy | コピーするコンテンツを示します # 8 |
| 十字線として表示されます 9 | |
| デフォルトのカーソルをレンダリングします 10 | |
| はボックスのサイズを変更することを意味します。 #11 | |
| # は、カーソル サイズを両方向に調整するという意味です。 | 12 | Grab
| 物が掴めることを示します | 13 | Grab
| は、何かを掴むことができることを意味します掴むことができます | #14#Help< p> | #役に立つという意味
| #15Move< p> は何かを移動することを意味します | |
| 16n-resize は、ボックスの端が上 (北) に移動することを意味します | |
| 17ne-resize ボックスの端を上と右 (北/東) に移動する必要があることを示します | |
| # 18 | new-resize は、カーソル サイズを両方向に調整することを意味します |
| 19 | ns-resize カーソル サイズの双方向調整を示します |
| 20 | nw-resize は、ボックスの端が上と左 (北/西) に移動することを意味します |
| ##nwse-resize双方向のサイズ変更カーソルを示します
| |
| no -drop | は、ドラッグされた項目をここにドラッグ アンド ドロップできないことを意味します | #23
| なし | # 要素 ## にはカーソルが表示されません #24 |
| 要求されたアクションは実行されないことを意味します | 25 |
| これはリンクを表すポインタです | #26 | #Progress
| #27## を表します。 #row-resize | は、行のサイズを垂直方向に変更できることを示します |
| 28 s-resize | は、ボックスの端を移動することを意味します。下 (南) に移動します。 |
| #29 se-resize | ボックスのエッジが下と右 (南/東) に移動することを表します|
| 30 sw-resize | 境界線を下と左 (南/西) に移動する必要があることを示します|
| ##31Text < /p> は選択できるテキストを示します | |
| ##32 | URL カスタム カーソルの URL のカンマ区切りリスト。最後にフェールセーフとしてユニバーサル カーソルが記載されています。 |
| 33 | vertical-text 選択可能な縦書きテキストを示します |
| #34 | < /strong>w-resize ボックスの端が左 (西) に移動することを示します |
| Waitプログラムがビジー状態であることを示します | |
| # #36 | #拡大#何かを示します。拡大できます | ##37
| ズームアウト | 一部のコンテンツをズームアウトできることを意味します < /p> #38 |
| カーソルのプロパティをデフォルト値に設定します。 #39 | |
| 親要素からカーソル属性を継承します。 | #CSS カーソル プロパティの実装例は次のとおりです。 | Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 5px;
float: left;
}
#one {
background-color: beige;
}
#two {
background-color: lavender;
}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nw-resize {cursor: nw-resize;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
</style></head>
<body>
<div id="one">
<div class="nw-resize">left corner</div><div class="n-resize">up</div>
<div class="ne-resize">right corner</div>
</div>
<div id="two">
<div class="not-allowed">Not-allowed</div><div class="pointer">Pointer</div>
</div>
</body>
</html>ログイン後にコピー |
