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{ カーソル:手 }
および

div{ カーソル:テキスト }

テキスト選択効果 3,

div{ カーソル:移動 }

移動選択エフェクト4, div{ カーソル:ポインタ } 指の形のリンク選択エフェクト

5, div{ カーソル:url(URL画像アドレス) } オブジェクトを画像として設定します

#カーソル スタイルのレンダリング

#マウス ポインタの説明

cursor は、オブジェクト上を移動するマウス ポインターによって使用されるシステム定義のカーソル形状を設定または取得します。

マウス ポインター スタイルを制御および設定するのが一般的ですが、カーソルを乱用したり、カスタム イメージをマウス スタイルとして簡単に設定したりしないでください。これにより、Web ページが複雑になり、ユーザーとの一貫性が失われます。カーソルの使用には注意してください。

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