ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS を使用してカーソルの外観を変更する
CSS を使用してカーソルの外観を変更する
- 王林転載
- 2023-09-23 14:53:051549ブラウズ
CSS カーソル プロパティを使用して、HTML ドキュメント内のさまざまな要素のカーソル画像を操作できます。
#SyntaxThe syntax of CSS cursor property is as follows:
Selector {
cursor: /*value*/
}
以下は CSS カーソル プロパティの値です -
| 値と説明 | |
|---|---|
| alias作成するもののエイリアスを示します | |
| フル スクロール任意の方向にスクロールできるコンテンツを表します | |
| 自動 デフォルトでは、ブラウザがカーソルを設定します | |
| Cell |
は、セル (またはセルのグループ) を選択できることを意味します
|
| context-menu | コンテキスト メニューが利用可能であることを示します | # 6
| col-resize | 列のサイズを水平方向に変更できることを示します | 7
| Copy |
コピーするコンテンツを示します
# 8 |
| 十字線として表示されます
9 |
|
| デフォルトのカーソルをレンダリングします
10 |
|
| はボックスのサイズを変更することを意味します。 #11 td> |
|
| # は、カーソル サイズを両方向に調整するという意味です。 | 12 | Grab
| 物が掴めることを示します |
13 | Grab
| は、何かを掴むことができることを意味します掴むことができます | #14#Help | #役に立つという意味
| #15Move は何かを移動することを意味します | |
| 16n-resize
は、ボックスの端が上 (北) に移動することを意味します |
|
| 17ne-resize
ボックスの端を上と右 (北/東) に移動する必要があることを示します | |
| # 18 | new-resize は、カーソル サイズを両方向に調整することを意味します |
| 19 |
ns-resize カーソル サイズの双方向調整を示します |
| 20 td> |
nw-resize は、ボックスの端が上と左 (北/西) に移動することを意味します |
| ##nwse-resize双方向のサイズ変更カーソルを示します
|
|
| no -drop | は、ドラッグされた項目をここにドラッグ アンド ドロップできないことを意味します | #23
| なし | # 要素 ## にはカーソルが表示されません #24 |
| 要求されたアクションは実行されないことを意味します |
25 |
| これはリンクを表すポインタです | #26 | #Progress
|
#27## を表します。 #row-resize | は、行のサイズを垂直方向に変更できることを示します |
|
28 p> s-resize | は、ボックスの端を移動することを意味します。下 (南) に移動します。 |
|
#29 se-resize | ボックスのエッジが下と右 (南/東) に移動することを表します|
|
30 sw-resize | 境界線を下と左 (南/西) に移動する必要があることを示します|
| ##31Text
は選択できるテキストを示します |
|
| ##32 | URL カスタム カーソルの URL のカンマ区切りリスト。最後にフェールセーフとしてユニバーサル カーソルが記載されています。 |
| 33 | strong>vertical-text 選択可能な縦書きテキストを示します |
| #34 | w-resize ボックスの端が左 (西) に移動することを示します |
| Waitプログラムがビジー状態であることを示します | |
| # #36 | #拡大#何かを示します。拡大できます p> | ##37
| ズームアウト |
一部のコンテンツをズームアウトできることを意味します
#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> | 出力
以上がCSS を使用してカーソルの外観を変更するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：CSSセレクターとは何ですか?次の記事：CSSセレクターとは何ですか?