CSS を使用してカーソルの外観を変更する-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS を使用してカーソルの外観を変更する

王林

Sep 23, 2023 pm 02:53 PM

CSS カーソルプロパティを使用して、HTML ドキュメント内のさまざまな要素のカーソル画像を操作できます。

#Syntax

The syntax of CSS cursor property is as follows:
Selector {
   cursor: /*value*/
}

以下は CSS カーソルプロパティの値です -

#Sr.No値と説明123##4Cell5context-menu# 67cross LineDefaulte- sizeew-resize## の端GrabGrab#役に立つという意味# 18##21#22no -drop#23許可されていません要求されたアクションは実行されないことを意味しますポインタこれはリンクを表すポインタです #Progress## は、プログラムがビジー状態 (進行中) は、行のサイズを垂直方向に変更できることを示しますは、ボックスの端を移動することを意味します。下 (南) に移動します。ボックスのエッジが下と右 (南/東) に移動することを表します境界線を下と左 (南/西) に移動する必要があることを示します##3233#3435##37Initial継承親要素からカーソル属性を継承します。 Example ライブデモンストレーション出力


	alias作成するもののエイリアスを示します
	フルスクロール任意の方向にスクロールできるコンテンツを表します
	自動デフォルトでは、ブラウザがカーソルを設定します
	は、セル (またはセルのグループ) を選択できることを意味します
	コンテキストメニューが利用可能であることを示します
col-resize	列のサイズを水平方向に変更できることを示します
Copy	コピーするコンテンツを示します # 8
十字線として表示されます 9
	デフォルトのカーソルをレンダリングします 10
	はボックスのサイズを変更することを意味します。 #11 td>
# は、カーソルサイズを両方向に調整するという意味です。	12
物が掴めることを示します	13
は、何かを掴むことができることを意味します掴むことができます	#14 #Help
	#15Move は何かを移動することを意味します
	16n-resize は、ボックスの端が上 (北) に移動することを意味します
	17ne-resize ボックスの端を上と右 (北/東) に移動する必要があることを示します
	new-resize は、カーソルサイズを両方向に調整することを意味します
19	ns-resize カーソルサイズの双方向調整を示します
20 td>	nw-resize は、ボックスの端が上と左 (北/西) に移動することを意味します
	##nwse-resize双方向のサイズ変更カーソルを示します
	は、ドラッグされた項目をここにドラッグアンドドロップできないことを意味します
なし	# 要素 ## にはカーソルが表示されません #24
	25
	#26
	#27## を表します。 #row-resize
	28 p> s-resize
	#29 se-resize
	30 sw-resize
	##31Text は選択できるテキストを示します
	URL カスタムカーソルの URL のカンマ区切りリスト。最後にフェールセーフとしてユニバーサルカーソルが記載されています。
	strong>vertical-text 選択可能な縦書きテキストを示します
	w-resize ボックスの端が左 (西) に移動することを示します
Wait プログラムがビジー状態であることを示します
# #36	#拡大#何かを示します。拡大できます p>
ズームアウト	一部のコンテンツをズームアウトできることを意味します #38
	カーソルのプロパティをデフォルト値に設定します。 #39
	#CSS カーソルプロパティの実装例は次のとおりです。
<!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で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

WordPressブロックと要素にボックスシャドウを追加しますMar 09, 2025 pm 12:53 PM

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成するMar 07, 2025 am 11:33 AM

このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています（注：使用できなくなりました）。フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。

スクリーンリーダーの分解：アクセス可能なフォームとベストプラクティスMar 08, 2025 am 09:45 AM

これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理：Focus-Visible」をご覧ください。で

満足している属性を持つインラインテキストエディターを作成しますMar 02, 2025 am 09:03 AM

インラインテキストエディターの構築は些細なものではありません。このプロセスは、ターゲット要素を編集可能にすることから始まり、その過程で潜在的なSyntaxerrorの例外を処理します。エディターの作成このエディターを構築するには、コンテンツを動的に変更する必要があります

GraphQLキャッシングの使用Mar 19, 2025 am 09:36 AM

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

最初のカスタムSvelteトランジションを作成しますMar 15, 2025 am 11:08 AM

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

5つの最高のPHPフォームビルダー（および3つの無料スクリプト）を比較するMar 04, 2025 am 10:22 AM

この記事では、Envato Marketで入手可能なPHPフォームのビルダースクリプトを説明し、機能、柔軟性、デザインを比較します。特定のオプションに飛び込む前に、PHPフォームのビルダーが何であるか、そしてそれを使用する理由を理解しましょう。 PHPフォーム

node.jsとexpressのMulterを使用してファイルアップロードしますMar 02, 2025 am 09:15 AM

このチュートリアルは、node.js、Express、およびMulterを使用してファイルアップロードシステムを構築することをガイドします。単一および複数のファイルのアップロードをカバーし、後で検索するためにMongoDBデータベースに画像を保存することさえ示します。まず、プロジェックをセットアップします

See all articles