CSS では、さまざまな HTML 要素にさまざまな種類のカーソルが使用され、カーソルの種類を変更するには、「 カーソル 」プロパティが使用されます。カーソルの種類を変更し、画面に表示するカーソルの値を設定できます。追加機能として、独自のカーソル イメージを設定することもできます。
このガイドでは、次のことを学びます。
- カーソルCSSプロパティとは
- CSSを使用してホバー時にカーソルを画像に変更する方法
それでは始めましょう！
「カーソル」CSSプロパティとは何ですか?
HTML 要素上のマウスの外観を制御するには、「 カーソル 」CSSのプロパティが利用できます。通常のカーソルを、コピー カーソル、ハンド ポインター、グラブなどのさまざまなタイプに変更できます。カーソル プロパティで画像の URL を設定することにより、独自のカスタム カーソルを設定することもできます。
構文
カーソル プロパティの構文は次のとおりです。
カーソル: URL ( ) ;上記の構文では、「 URL() 画面に表示したい」
ここで例に移り、ホバー時に通常のカーソルを画像に変更します。
CSS を使用してホバー時にカーソルを画像に変更する方法は?
ホバー時にカーソルを画像に変更するには、まず HTML に要素を追加します。
例 1: cursor プロパティを使用してホバー時にカーソルを画像に変更する
見出し
とボタン クラス名 “ ボタン 」。
HTML
< 体 >< h1 > ホバー時にカーソルを画像に変更 h1 >
< ボタン クラス = 「ボタン」 > クリックミー ボタン >
体 >
現在、ボタンにカーソルを合わせると、デフォルトのカーソルが表示されます。
次に CSS に移動し、カーソルを画像に変更します。
次に、「」に画像のパスを設定します URL() 」。たとえば、「i with.svg 」を選択した画像として。次に、cursor プロパティの値を「 自動 」。
CSS
.btn {カーソル: URL ( icon.svg ) 、自動;
パディング: 10px;
}
上記のコードを保存し、HTML ファイルを実行して、次の結果を確認します。
与えられた出力は、ホバー時にカーソルが正常に画像に変更されたことを示しています。
ノート： 「 自動 ” は、cursor プロパティの代替オプションとして使用されます。画像がロードされない場合、またはファイル パスまたはファイル自体が見つからない場合、auto 値により、デフォルトのアイコンが画面に表示されます。
例 2: ホバー時のデフォルト カーソルの設定
たとえば、画像の URL を指定し、cursor プロパティの値を「 自動 」：
カーソル: URL ( ) 、自動;その結果、ボタンの上にカーソルを置いてもカーソルは変化しません。
例 3: ホバー時に代替画像を設定する
auto の代わりに、画像の代替として表示するカーソルのさまざまな値を設定できます。たとえば、cursor プロパティの値を「 自動 ' に ' ポインター 」：
カーソル: URL ( ) 、ポインタ;以下の出力でわかるように、カーソルをボタンの上に置くと、カーソルが手のポインターに変わります。
CSS を使用してホバー時にカーソル画像を変更する最も簡単な方法を提供しました。
結論
CSS では、「 カーソル ' 財産。 「を割り当てることにより、通常のカーソルを画像に変更できます URL 」をカーソルプロパティに追加します。要素の上にカーソルを置いたときに表示する任意のタイプのカーソルを適用できます。この記事では、カーソルをハンド ポインターに変更する方法を示しました。