ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSS()を使用してjqueryでマウス禁止スタイルを設定する方法
方法: CSS() を使用して、マウス スタイル属性「cursor」の値を「not-allowed」に設定するだけです。構文は「element object.css("cursor","not-allowed"」です) )」または「element.css({"cursor":"not-allowed"})」。
このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。
マウス禁止スタイルを設定したい場合は、cursor 属性を使用するだけです。
CSS() を使用して、マウス スタイル属性「cursor」の値を「not-allowed」に設定するだけです。
設定構文は 2 つあります:
元素对象.css("cursor","not-allowed") 元素对象.css({"cursor":"not-allowed"})
実装例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { // $("p").css("cursor","not-allowed"); $("p").css({"cursor":"not-allowed"}); }); }); </script> </head> <body> <p>一个p元素,让鼠标移动到该元素上</p> <button>设置鼠标禁止样式</button> </body> </html>
手順:
cursor 属性は、マウス ポインターが要素の境界内に置かれたときに使用されるカーソルの形状を定義します。
カーソル属性の属性値が「不可」の場合、マウスカーソルの形状は禁止パターンとなります。
カーソル属性には次の値があります。デフォルト値はdefaultです
##crosshair; | 十字線ハート | カーソルは十字線として表示されます | |
カーソル: 手; #Write手だけを認識する IE5 を処理するために 2 つあります。
|
カーソルはヒント (指) の形で接続を示します |
||
待機/砂時計 |
カーソルは、現在のプログラムがビジーであることを示します(通常は時計または砂時計) |
カーソル: help; | |
help |
カーソルは、現在の場所でヘルプが利用できることを示します (通常は疑問符またはバルーン) |
#cursor: no-drop; | |
リリースできません | カーソル: ドロップなし; | ##カーソル: text;
| #Text/Edit|
カーソルは、現在の位置がテキスト コンテンツであることを示します |
cursor: move; | #移動可能なオブジェクト | |
#カーソルは、何かを移動する必要があることを示します | カーソル: n-resize; | サイズを上方向に変更 (北) | |
エッジは上に移動できます (北) | cursor: s-resize; | サイズを下に変更します (南) | |
カーソル: e-resize; |
右方向にサイズ変更(東) |
||
カーソル: w- サイズ変更; |
サイズを左(西)に変更します |
||
cursor: ne-resize; |
サイズを上と右に変更します (北東) |
||
カーソル: nw-resize; |
#サイズを上下左右に変更します (北西) | #エッジを上下左右に移動できます (北西)||
サイズを右下 (南東) に変更します | #端を右に下げることもできます 移動 (南東) | ||
サイズを変更下と左 (南西) | エッジは左下 (南西) に移動できます | ||
##自動 | ブラウザはカーソルを設定します | #cursor:許可されていない; | |
禁止 |
#カーソル:許可されていない; | #カーソル: 進行状況; |
|
カーソル: 進行状況; | cursor: デフォルト ; |
||
デフォルトのカーソル状態 (通常は矢印) | cursor: url(' # '); # = カーソルファイルアドレス |
||
|
注: 追加を定義した後にカスタマイズしますURL で定義されたカーソルが使用できない場合に備えて、カーソルの後ろにある一般的なカーソルです。 | カーソル属性には非常に多くの値があると言えるでしょう。 、どうやって覚えるの?実際の開発では、通常「default」と「pointer」の 2 つの属性値のみを使用し、その他の属性値はほとんど使用されません。どうしても他に何か必要な場合は、戻ってこのような表を確認してください。 [推奨学習: | jQuery ビデオ チュートリアル
以上がCSS()を使用してjqueryでマウス禁止スタイルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。