ホームページ > 記事 > ウェブフロントエンド > CSSでカーソルのスタイルを変更する方法
CSS では、cursor 属性は、マウス ポインターが要素の境界内に配置されたときに使用されるカーソルの形状を定義するために使用されます。マウス カーソル (ポインター) のスタイルは、次のように設定できます。カーソル属性。
カーソル属性の構文:
cursor: auto|crosshair|default|hand|move|help|wait|text|w-resize|s-resize|n-resize|e-resize|ne-resize|sw-resize|se-resize|nw-resize|pointer|url(url)
可能な属性値:
# URL: 使用するカスタム カーソルURL。注: URL で定義された使用可能なカーソルがない場合に備えて、常にこのリストの最後に通常のカーソルを定義してください。
# デフォルト: デフォルトのカーソル (通常は矢印)
# 自動: デフォルト。ブラウザによって設定されたカーソル。
# 十字線: カーソルは十字線として表示されます。
# ポインタ: カーソルはリンクを示すポインタ (手) として表示されます。
# move: このカーソルはオブジェクトが移動できることを示します。
##● e-resize: このカーソルは、長方形のボックスの端を右 (東) に移動できることを示します。 # ne-resize: このカーソルは、長方形のボックスの端を上および右 (北/東) に移動できることを示します。##● nw-resize: このカーソルは、長方形のボックスの端を上と左 (北/西) に移動できることを示します。
##● n-resize: このカーソルは、長方形のボックスの端を上(北)に移動できることを示します。##● se-resize: このカーソルは、長方形のボックスの端を下と右 (南/東) に移動できることを示します。
##● sw-resize: このカーソルは、長方形のボックスの端を下と左 (南/西) に移動できることを示します。##● s-resize: このカーソルは、長方形のボックスの端を下(北/西)に移動できることを示します。
##● w-resize: このカーソルは、長方形のボックスの端を左 (西) に移動できることを示します。 # text: このカーソルはテキストを示します。## ● 待機: このカーソルは、プログラムがビジー状態であることを示します (通常は時計または砂時計)。
# ヘルプ: このカーソルは、利用可能なヘルプ (通常は疑問符または吹き出し) を示します。
一般的に使用されるカーソル カーソルの説明 1,div{ カーソル:デフォルト }
デフォルトの通常のマウス ポインタ 2 , div{ カーソル:手 }
および
テキスト選択効果 3,
移動選択エフェクト4,
div{ カーソル:ポインタ }
指の形のリンク選択エフェクト
5, div{ カーソル:url(URL画像アドレス) }
オブジェクトを画像として設定します
#カーソル スタイルのレンダリング
cursor は、オブジェクト上を移動するマウス ポインターによって使用されるシステム定義のカーソル形状を設定または取得します。
マウス ポインター スタイルを制御および設定するのが一般的ですが、カーソルを乱用したり、カスタム イメージをマウス スタイルとして簡単に設定したりしないでください。これにより、Web ページが複雑になり、ユーザーとの一貫性が失われます。カーソルの使用には注意してください。
以上がCSSでカーソルのスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。