CSSのカーソル属性の使い方-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSのカーソル属性の使い方

青灯夜游

May 28, 2019 pm 12:03 PM

css

cssのcursor属性は、表示するカーソルの種類（形状）を指定するために使用され、マウスポインタが要素の境界内に置かれたときに使用されるカーソルの形状を定義します。すべての主要なブラウザはカーソル属性をサポートしています。

CSSのカーソル属性の使い方

CSS カーソル属性を使用するにはどうすればよいですか?

カーソル属性は、表示するカーソルの種類（形状）を指定します。

可能な属性値:

● url: 使用されるカスタムカーソルの URL。注: URL で定義された使用可能なカーソルがない場合に備えて、常にこのリストの最後に通常のカーソルを定義してください。

# デフォルト: デフォルトのカーソル (通常は矢印)

# 自動: デフォルト。ブラウザによって設定されたカーソル。

# 十字線: カーソルは十字線として表示されます。

# ポインタ: カーソルはリンクを示すポインタ (手) として表示されます。

# move: このカーソルはオブジェクトが移動できることを示します。

##● e-resize: このカーソルは、長方形のボックスの端を右 (東) に移動できることを示します。

# ne-resize: このカーソルは、長方形のボックスの端を上および右 (北/東) に移動できることを示します。

##● nw-resize: このカーソルは、長方形のボックスの端を上と左 (北/西) に移動できることを示します。

##● n-resize: このカーソルは、長方形のボックスの端を上(北)に移動できることを示します。

##● se-resize: このカーソルは、長方形のボックスの端を下と右 (南/東) に移動できることを示します。

##● sw-resize: このカーソルは、長方形のボックスの端を下と左 (南/西) に移動できることを示します。

##● s-resize: このカーソルは、長方形のボックスの端を下(北/西)に移動できることを示します。

##● w-resize: このカーソルは、長方形のボックスの端を左 (西) に移動できることを示します。

# text: このカーソルはテキストを示します。

## ● 待機: このカーソルは、プログラムがビジー状態であることを示します (通常は時計または砂時計)。

# ヘルプ: このカーソルは、利用可能なヘルプ (通常は疑問符または吹き出し) を示します。

説明:

この属性は、マウスポインターが要素の境界範囲内に置かれたときに使用されるカーソルの形状を定義します (ただし、CSS2.1 では、どの境界がこの範囲を決定するかは定義されていません)。

注:

すべての主要なブラウザは、カーソル属性をサポートしています。 Opera 9.3 および Safari 3 は URL 値をサポートしていません。属性値「inherit」は、IE8 を含む Internet Explorer のどのバージョンでもサポートされていません。

css カーソル属性の例

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
	</head>

	<body>
		<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
		<span style="cursor:auto">Auto</span><br />
		<span style="cursor:crosshair">Crosshair</span><br />
		<span style="cursor:default">Default</span><br />
		<span style="cursor:pointer">Pointer</span><br />
		<span style="cursor:move">Move</span><br />
		<span style="cursor:e-resize">e-resize</span><br />
		<span style="cursor:ne-resize">ne-resize</span><br />
		<span style="cursor:nw-resize">nw-resize</span><br />
		<span style="cursor:n-resize">n-resize</span><br />
		<span style="cursor:se-resize">se-resize</span><br />
		<span style="cursor:sw-resize">sw-resize</span><br />
		<span style="cursor:s-resize">s-resize</span><br />
		<span style="cursor:w-resize">w-resize</span><br />
		<span style="cursor:text">text</span><br />
		<span style="cursor:wait">wait</span><br />
		<span style="cursor:help">help</span>
	</body>

</html>

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

声明

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

CSSグリッドとは何ですか？Apr 30, 2025 pm 03:21 PM

CSSグリッドは、複雑で応答性の高いWebレイアウトを作成するための強力なツールです。設計を簡素化し、アクセシビリティを向上させ、古い方法よりも多くの制御を提供します。

CSS Flexboxとは何ですか？Apr 30, 2025 pm 03:20 PM

記事では、レスポンシブデザインにおけるスペースの効率的なアラインメントと分布のためのレイアウト方法であるCSS FlexBoxについて説明します。 FlexBoxの使用量を説明し、CSSグリッドと比較し、ブラウザのサポートを詳細に説明します。

CSSを使用してWebサイトを応答するにはどうすればよいですか？Apr 30, 2025 pm 03:19 PM

この記事では、ビューポートメタタグ、柔軟なグリッド、流体メディア、メディアクエリ、相対ユニットなど、CSSを使用してレスポンシブWebサイトを作成するための手法について説明します。また、CSSグリッドとフレックスボックスを使用してカバーし、CSSフレームワークを推奨しています

CSSボックスサイズのプロパティは何をしますか？Apr 30, 2025 pm 03:18 PM

この記事では、要素の寸法の計算方法を制御するCSSボックスサイズのプロパティについて説明します。コンテンツボックス、ボーダーボックス、パディングボックスなどの値と、レイアウト設計とフォームアライメントへの影響について説明します。

CSSを使用してアニメーション化するにはどうすればよいですか？Apr 30, 2025 pm 03:17 PM

記事では、CSS、キープロパティ、およびJavaScriptとの組み合わせを使用してアニメーションの作成について説明します。主な問題は、ブラウザの互換性です。

CSSを使用してプロジェクトに3D変換を追加できますか？Apr 30, 2025 pm 03:16 PM

記事では、3D変換、主要なプロパティ、ブラウザの互換性、およびWebプロジェクトのパフォーマンスに関する考慮事項にCSSを使用して説明します。

CSSに勾配を追加するにはどうすればよいですか？Apr 30, 2025 pm 03:15 PM

この記事では、CSSグラデーション（線形、放射状、繰り返し）を使用して、ウェブサイトのビジュアルを強化し、深さ、フォーカス、および現代の美学を追加します。

CSSの擬似要素とは何ですか？Apr 30, 2025 pm 03:14 PM

記事では、CSSの擬似要素、HTMLスタイリングの強化における使用、および擬似クラスとの違いについて説明します。実用的な例を提供します。

See all articles

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。