CSS()を使用してjqueryでマウス禁止スタイルを設定する方法-フロントエンドQ&A-php.cn

CSS()を使用してjqueryでマウス禁止スタイルを設定する方法

青灯夜游

リリース： 2022-05-07 20:30:23

オリジナル

1991 人が閲覧しました

方法: CSS() を使用して、マウススタイル属性「cursor」の値を「not-allowed」に設定するだけです。構文は「element object.css("cursor","not-allowed"」です) )」または「element.css({"cursor":"not-allowed"})」。

CSS()を使用してjqueryでマウス禁止スタイルを設定する方法

このチュートリアルの動作環境: 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>

ログイン後にコピー

CSS()を使用してjqueryでマウス禁止スタイルを設定する方法

手順:

cursor 属性は、マウスポインターが要素の境界内に置かれたときに使用されるカーソルの形状を定義します。

カーソル属性の属性値が「不可」の場合、マウスカーソルの形状は禁止パターンとなります。

カーソル属性には次の値があります。デフォルト値はdefaultです

##カーソル: ポインタ; カーソル: 待機;カーソル: help;#Text/Editcursor: move;#エッジは下 (南) に移動できますボックスの端を右(東)に移動できますエッジは移動できます左 (西)カーソルヒントボックスエッジを右上(北東方向)に移動できます#エッジを上下左右に移動できます (北西)cursor: se-resize;サイズを右下 (南東) に変更します #端を右に下げることもできます移動 (南東)##cursor: sw-resize;#カーソル: 自動;#cursor:許可されていない;処理中カーソル: 進行状況;#システムデフォルト#ユーザー定義 (アニメーションあり)jQuery ビデオチュートリアル、Web フロントエンド開発

##crosshair;	十字線ハート	カーソルは十字線として表示されます
カーソル: 手; #Write手だけを認識する IE5 を処理するために 2 つあります。 #手	カーソルはヒント (指) の形で接続を示します
待機/砂時計	カーソルは、現在のプログラムがビジーであることを示します(通常は時計または砂時計)
help	カーソルは、現在の場所でヘルプが利用できることを示します (通常は疑問符またはバルーン)	#cursor: no-drop;
リリースできません	カーソル: ドロップなし;	##カーソル: text;
カーソルは、現在の位置がテキストコンテンツであることを示します		#移動可能なオブジェクト
#カーソルは、何かを移動する必要があることを示します	カーソル: n-resize;	サイズを上方向に変更 (北)
エッジは上に移動できます (北)	cursor: s-resize;	サイズを下に変更します (南)
	カーソル: e-resize;	右方向にサイズ変更(東)
	カーソル: w- サイズ変更;	サイズを左(西)に変更します
	cursor: ne-resize;	サイズを上と右に変更します (北東)
	カーソル: nw-resize;	#サイズを上下左右に変更します (北西)

サイズを変更下と左 (南西)	エッジは左下 (南西) に移動できます
##自動	ブラウザはカーソルを設定します
禁止	#カーソル:許可されていない;	#カーソル: 進行状況;
		cursor: デフォルト ;
デフォルトのカーソル状態 (通常は矢印)		cursor: url(' # '); # = カーソルファイルアドレス
カーソルの URL 位置をカスタマイズします	注: 追加を定義した後にカスタマイズしますURL で定義されたカーソルが使用できない場合に備えて、カーソルの後ろにある一般的なカーソルです。	カーソル属性には非常に多くの値があると言えるでしょう。、どうやって覚えるの？実際の開発では、通常「default」と「pointer」の 2 つの属性値のみを使用し、その他の属性値はほとんど使用されません。どうしても他に何か必要な場合は、戻ってこのような表を確認してください。 [推奨学習: