カーソル変更CSS

カーソルの変更 css

Web デザインでは、マウスの視覚効果とユーザー操作中のインタラクティブなエクスペリエンスを向上させるために、マウスのスタイルを変更する必要がある場合があります。このとき、CSS を通じてカーソルのスタイルを変更できます。この記事ではCSSでカーソルのスタイルを変更する方法を紹介します。

1. CSS カーソル プロパティ

CSS カーソル プロパティは、マウス ポインターのスタイルを指定するために使用されます。このプロパティは、マウス ポインターのさまざまな状態を表す値を受け入れます。これらの状態には、デフォルト、リンク、テキスト選択、移動などが含まれます。 CSS カーソル属性の構文は次のとおりです:

cursor: value;

ここで、値は次の値のいずれかになります:

• auto
• default
• none
• コンテキストメニュー
• ヘルプ
• ポインター
• 進行状況
• 待機
• セル
• crosshair
• text
• vertical-text
• alias
• copy
• move
• no-drop
• 許可されていません
• 掴む
• 掴む

2. 一般的なマウス ポインター スタイル

1. 手の形状

最も一般的なマウス ポインターのスタイルは手の形で、マウスがリンクを指していることを示します。手の形のスタイルは CSS を通じて変更できます。

a:hover {

cursor: grab;

}

マウスがリンクをポイントすると、マウスが指のパターンに変わります。マウスがリンク上にあるときに、CSS を使用してマウス ポインタのスタイルを変更し、グラブ ハンドルのように見せることができます。

2. 禁止記号

もう 1 つの一般的なマウス ポインター スタイルは禁止記号で、これは通常、ユーザーが特定の操作を実行できないことを示すために使用されます。

.disable{

cursor: not-allowed;

}

CSS カーソル属性の許可されていない値を設定することで、マウスを禁止されたシンボルの形状に変更できます。たとえば、アクション ボタンの CSS クラスを .disable に設定すると、ユーザーがボタンをクリックしようとすると、マウス ポインタが無効のシンボルに変わります。

3. 待機中のシンボル

ページの読み込みや特定の操作の実行に時間がかかる場合、待機中のシンボルを使用して、操作が進行中であることをユーザーに伝え、操作を中断しないようにすることができます。急ぎ。

.loading {

cursor: wait;

}

CSS カーソル属性の待機値を設定することで、マウス ポインターを待機シンボルに変えることができます。たとえば、大きな画像を読み込む場合、マウスが画像をポイントするとマウス ポインタが待機記号に変わり、ページが読み込まれていることをユーザーに知らせることができます。

3. カスタマイズされたカーソル スタイル

一般的なマウス ポインター スタイルに加えて、CSS を使用してカスタム カーソル パターンを作成することもできます。

.custom{

cursor: url('custom-cursor.png'), auto;

}

CSS カーソル属性の URL 値を設定することで、カスタム カーソル パターンのパスを指定できます。この例では、パスを「testcursor.png」に設定し、カーソルのスタイルを auto に設定します。これにより、カスタム カーソルの形状が指定され、指定された要素に適用されます。

4. マウス移動イベント

ユーザー インタラクションと視覚効果を高めるために、マウス移動イベントを通じてマウス ポインターのスタイルを変更できます。

.box{

cursor: pointer;
transition: all .5s ease;

}
.box:hover{

transform: rotate(90deg);

}

この例では、.box 要素を設定します。ポインターの CSS カーソル プロパティは、マウス ポインターをその要素を指す指に変えます。 CSS3 トランジション アニメーションも使用しました。ユーザーが .box 要素の上にマウス ポインタを置くと、要素は 90 度回転し、マウス ポインタは回転矢印スタイルに変わります。

全体として、CSS を使用してカーソル スタイルを変更することは、ユーザー インタラクションをより個人的で興味深いものにすることができる便利なテクニックです。ユーザー エクスペリエンスを向上させるために、特定のニーズに応じてさまざまなカーソル スタイルを選択できます。

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