🖱️CSSカーソル一覧

pointerとdefaultの違い

pointerは指の形をしたカーソルで、リンクやボタンのようにクリックできる要素であることを示すときに使います。defaultは環境標準の矢印カーソルで、クリックしても何も起きない文字や背景の上で使うのが基本です。

cursorの初期値autoの動き

cursorプロパティの初期値はautoで、ブラウザが文字の上ではtext、それ以外の場所ではdefaultのように、カーソルの形を場所に応じて自動で選びます。

cursorを指定しても変わらない原因

cursorを指定してもカーソルの形が変わらないときは、別の要素が上に重なっているか、別のルールで指定が上書きされていることが多いです。

• 上に重なった要素：透明な要素や疑似要素が上に重なっていると、カーソルの形は一番上にある要素のcursor指定に従って表示されます。
• 詳細度による上書き：同じ要素に複数のルールが当たる場合は、詳細度（セレクタの強さ）が高いルールのcursor指定が優先されます。
• OSやブラウザによる違い：カーソルの絵柄はOSやブラウザが用意したものが使われるため、同じ値でもWindowsとmacOSでは形が異なります。