ホームページ > 記事 > ウェブフロントエンド > CSSのカーソル属性の使い方
CSSのカーソル属性の使い方
- 青灯夜游オリジナル
- 2019-05-28 12:03:002911ブラウズ
cssのcursor属性は、表示するカーソルの種類（形状）を指定するために使用され、マウスポインタが要素の境界内に置かれたときに使用されるカーソルの形状を定義します。すべての主要なブラウザはカーソル属性をサポートしています。
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 サイトの他の関連記事を参照してください。