JavaScript/jQueryでカーソルを待機状態に変更するにはどうすればよいですか?

onmouseover イベントと onmouseout イベントを使用して、カーソルを待機状態に設定または変更できます。 JavaScript には、マウス上でさまざまな機能を実行するさまざまなタイプのマウス イベントがあります。いくつかのマウスイベントを見てみましょう。

• onmousedown - これらのイベントは、HTML 要素上でマウス ボタンが押されたときに発生します。

• onmouseenter - ポインタが要素の外に移動すると発生します

• onmousemove - これらのイベントは、ポインタが HTML 要素上を移動すると発生します

• onmouseout - ポインタが要素から離れると発生します

• onmouseover - このイベントは、マウスが HTML 要素の上にあるときに発生します。

• onmouseup - HTML 要素でポインタ ボタンが解放されました

onmouseover イベントと onmouseout イベントは、ポインタが HTML 要素から離れるときに使用されます。 onmouseover イベントは、onmouseenter がバブルしないことを除いて、onmouseenter イベントと非常に似ています。 onmouseover イベントは、HTML タグ (html、head、title、style、meta、base、bdo、br、iframe、param、script) では機能しません。

style.cursor プロパティは、ポインターが表示するカーソルの種類を設定または返すために使用されます。ポインターが要素の上にある場合、表示されているマウス カーソルを表す文字列値を返します。自動がデフォルト値です。これは JavaScript の Cursor プロパティに属します。

＃＃＃文法＃＃＃

以下は、JavaScript でカーソルを待機状態に変更するための構文です -

リーリー

パラメータ

スタイル プロパティには、エイリアス、フルスクロール、自動、セル、コンテキスト メニュー、クロスヘア、デフォルト、e-resize、ew-resize、move、n-resize、ne- などのさまざまなタイプの値が定義されています。サイズ変更、新しいサイズ変更、なし、ポインター、進行状況、および継承。

戻り値

ポインターが要素上に置かれ、表示されているマウス カーソルを表す文字列値が返されます。

＃＃＃例＃＃＃

この例では、JavaScript を使用してカーソルを待機状態に変更します。

リーリー

ここでは、関数名 myFunction() の段落記号に onmouseover マウス イベントを使用します。 myFunction( ) メソッドの場合、オブジェクト「document.getElementById( )」を使用して style.cursor プロパティを実装します。id は、css 要素を定義した「box」を取得します。カーソルの属性値は「wait」です。これは、カーソルが HTML 要素上にあるとき、カーソルが表示されるたびに待機状態になることを意味します。

＃＃＃例＃＃＃

別の例をとり、さまざまなマウス イベントを使用して JavaScript でカーソルを待機状態に変更する方法を見てみましょう。

リーリー

マウスを要素の上に置くと、次の図に示すように、カーソルの外観が待機状態に変わります -

＃＃＃例＃＃＃

これらの例では、jQuery を使用してカーソルを待機状態に変更する方法を見ていきます。

リーリー

マウスを要素の上に置くと、次の図に示すように、カーソルの外観が待機状態に変わります -

マウスが要素から離れると、図に示すように、カーソルの外観はデフォルト値に戻ります -

例でわかるように、ここでは「

$

(this).css("cursor", "progress")」を使用して、カーソルの状態を div 要素の進行状況に変更します。プログラム内で使用する で指定します。カーソルをデフォルトの状態に戻すには、カーソルのプロパティをデフォルトの「

$

(this).css("cursor", "default")」に設定します。

今回は、カーソルを待機状態に遷移させる方法を例を挙げて説明します。ここでは 2 つの異なる例を示します。最初の例では、onmouseover イベントを使用してカーソルの状態を変更します。 2 番目の例では、onmouseover イベントと onmouseout イベントを使用してカーソルを待機状態に変更します。 JavaScript の両方の例では、style.cursor プロパティを使用してカーソルの値を定義します。 3 番目の例では、jQuery を使用して、jQuery カーソル プロパティを通じてカーソルの外観を変更します。

以上がJavaScript/jQueryでカーソルを待機状態に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。