CSS カーソルプロパティの例-CSSチュートリアル-php.cn

Example

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS カーソルプロパティの例

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 10, 2023 pm 02:53 PM

CSS 光标属性示例

CSS カーソルプロパティを使用すると、十字線やプラス記号、ポインターなどを表示できます。次のコードを実行して、CSS でカーソルプロパティを実装してみることができます。 -

Example

<html>
   <head>
   </head>
   <body>
      <div style = "cursor:auto">Auto</div>
      <div style = "cursor:crosshair">Crosshair</div>
      <div style = "cursor:default">Default</div>
      <div style = "cursor:pointer">Pointer</div>
      <div style = "cursor:move">Move</div>
      <div style = "cursor:e-resize">e-resize</div>
      <div style = "cursor:ne-resize">ne-resize</div>
      <div style = "cursor:nw-resize">nw-resize</div>
      <div style = "cursor:n-resize">n-resize</div>
      <div style = "cursor:se-resize">se-resize</div>
      <div style = "cursor:sw-resize">sw-resize</div>
      <div style = "cursor:s-resize">s-resize</div>
      <div style = "cursor:w-resize">w-resize</div>
      <div style = "cursor:text">text</div>
      <div style = "cursor:wait">wait</div>
      <div style = "cursor:help">help</div>
   </body>
</html>

ログイン後にコピー

上記に次の値を追加しました -

##自動形状カーソルの位置は、カーソルが配置されているコンテキスト領域の端に依存します。たとえば、テキストの「I」、リンクの「手」などです。 #十字線デフォルト#Pointer指を指す手 (IE 4 では、この値は手です)。移動「I」列e-resizeカーソル表示の端ボックスは右（東）に移動します。 ne-resizeカーソル表示ボックスの端が上と右 (北/東) に移動します。 nw-resizeカーソル表示ボックスの端が上と左 (北/西) に移動します。 n-resizeカーソルは、ボックスの端が上 (北) に移動されることを示します。 se-resizesw-resizes-resizeカーソル表示ボックスの端が左(西)に移動します)。I 列。砂時計。疑問符またはバルーン。ヘルプボタンでの使用に最適です。カーソル画像ファイルのソース。

値	説明

十字線またはプラス記号
矢印






カーソルは、指定されたボックスの端を下と右 (南/東) に移動します。
カーソルはボックスの端を下と左 (南/西) に移動します。
カーソル表示ボックスの端が下(南)に移動します)。	#w-resize
	テキスト
	待っています
	#ヘルプ

以上がCSS カーソルプロパティの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7322

Java チュートリアル

1625

CakePHP チュートリアル

1349

Laravel チュートリアル

1261

PHP チュートリアル

1209

Related knowledge

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

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

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

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

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

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

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

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

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

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

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

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

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

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