jquery怎麼用CSS()設定滑鼠禁止樣式-前端問答-PHP中文網

首頁

web前端

前端問答

jquery怎麼用CSS()設定滑鼠禁止樣式

青灯夜游

May 07, 2022 pm 08:30 PM

jquery

方法：只需用CSS()將滑鼠樣式屬性「cursor」的值設為「not-allowed」即可，語法為「元素物件.css("cursor","not-allowed" )」或「元素.css({"cursor":"not-allowed"})」。

jquery怎麼用CSS()設定滑鼠禁止樣式

本教學操作環境：windows7系統、jquery1.10.2版本、Dell G3電腦。

想要設定滑鼠禁止樣式，只需使用的cursor屬性。

只需用CSS()將滑鼠樣式屬性「cursor」的值設為「not-allowed」即可。

設定語法有兩種：

元素对象.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>

jquery怎麼用CSS()設定滑鼠禁止樣式

說明：

cursor屬性定義了滑鼠指標放在一個元素邊界範圍內時所使用的遊標形狀。

當cursor屬性的屬性值為“not-allowed”，則滑鼠遊標形狀為禁止圖案。

cursor屬性取值如下，預設值為default

cursor: wait;cursor: help;#cursor: no-drop;cursor: text;cursor: move;cursor: n-resize;cursor: s-resize;#cursor: e-resize;cursor: w- resize;cursor: ne-resize;cursor: nw-resize;

#crosshair;	十字準心臟	遊標表現為十字準線
##cursor: pointer; #寫兩個是為了照顧IE5，它只認hand。手	遊標以暗示(手指)的形式來表示有一個連接
等待/沙漏	遊標暗示目前程式正忙(一般為一塊表或是沙漏)
##幫助	遊標暗示目前位置可得到幫助(一般為問號或是氣球)
無法釋放	cursor: no-drop;
文字/編輯	#遊標暗示目前所處位置為文字內容
可移動物件	#遊標暗示某些東西應該被移動
向上改變大小(North)	邊緣可向上移動(北)
向下改變大小(South)	邊緣可往下方移動(南)
向右邊改變大小(East)	box邊緣可向右(東)邊移動
向左改變大小(West)	#邊緣可向左移動(西)
向上右改變大小(North East)	遊標暗示box的邊緣可向右上方移動(東北方向)
向上左改變大小(North West)	邊緣可向左上方移動(西北)
#cursor: se-resize;	向下右改變大小(South East)	邊緣可向右下方移動(東南)
cursor: sw-resize;	向下左改變大小(South West)	邊緣可向左下方移動(西南)
#cursor: auto;	#自動	瀏覽器設定一個遊標
#cursor:not-allowed;	禁止	cursor:not-allowed;
cursor: progress;	處理中	cursor: progress;
cursor: default ;	系統預設	預設的遊標狀態（通常是箭頭）
cursor: url(' # '); # = 遊標檔案位址 (注意檔案格式為：.cur 或.ani)。	用戶自訂（可用動畫）	自訂遊標的url位置注意：定義完自訂的遊標之後在末尾加上一般性的遊標，以防那些url所定義的遊標不能使用

#大家可能會說，cursor屬性值這麼多，怎麼記呀？其實大家不用擔心，在實際開發中，我們一般只用到「default」和「pointer」這兩個屬性值，其他的一般都很少用得上。如果實在沒辦法還需要其他的，那就回來查這種表就行了。

【推薦學習：jQuery影片教學、web前端開發】

以上是jquery怎麼用CSS()設定滑鼠禁止樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

反應的局限性是什麼？May 02, 2025 am 12:26 AM

Include：1）AsteeplearningCurvedUetoItsVasteCosystem，2）SeochallengesWithClient-SiderEndering，3）潛在的PersperformanceissuesInsuesInlArgeApplications，4）ComplexStateStateManagementAsappsgrow和5）TheneedtokeEedtokeEedtokeEppwithitsrapideDrapidevoltolution.thereedtokeEppectortorservolution.thereedthersrapidevolution.ththesefactorsshesssheou

React的學習曲線：新開發人員的挑戰May 02, 2025 am 12:24 AM

reactischallengingforbeginnersduetoitssteplearningcurveandparadigmshifttocoment oparchitecent.1）startwithofficialdocumentationforasolidFoundation.2）了解jsxandhowtoembedjavascriptwithinit.3）

為React中的動態列表生成穩定且獨特的鍵May 02, 2025 am 12:22 AM

ThecorechallengeingeneratingstableanduniquekeysfordynamiclistsinReactisensuringconsistentidentifiersacrossre-rendersforefficientDOMupdates.1)Usenaturalkeyswhenpossible,astheyarereliableifuniqueandstable.2)Generatesynthetickeysbasedonmultipleattribute

JavaScript疲勞：與React及其工具保持最新May 02, 2025 am 12:19 AM

javascriptfatigueinrectismanagbaiblewithstrategiesLike just just in-timelearninganning and CuratedInformationsources.1）學習whatyouneedwhenyouneedit

使用USESTATE（）掛鉤的測試組件May 02, 2025 am 12:13 AM

tateractComponents通過theusestatehook，使用jestandReaCtTestingLibraryToSigulationsimintionsandIntractions and verifyStateChangesInTheUI.1）underthecomponentAndComponentAndComponentAndConconentAndCheckInitialState.2）模擬useruseruserusertactionslikeclicksorformsorformsormissions.3）

React中的鑰匙：深入研究性能優化技術May 01, 2025 am 12:25 AM

KeysinreactarecrucialforopTimizingPerformanceByingIneFefitedListupDates.1）useKeyStoIndentifyAndTrackListelements.2）避免使用ArrayIndicesasKeystopreventperformansissues.3）ChooSestableIdentifierslikeIdentifierSlikeItem.idtomaintainAinainCommaintOnconMaintOmentStateAteanDimpperperFermerfermperfermerformperfermerformfermerformfermerformfermerment.ChosestopReventPerformissues.3）

反應中的鍵是什麼？May 01, 2025 am 12:25 AM

ReactKeySareUniqueIdentifiers usedwhenrenderingListstoimprovereConciliation效率。 1）heelPreactrackChangesInListItems，2）使用StableanDuniqueIdentifiersLikeItifiersLikeItemidSisRecumended，3）避免使用ArrayIndicesaskeyindicesaskeystopreventopReventOpReventSissUseSuseSuseWithReRefers和4）

反應中獨特鍵的重要性：避免常見的陷阱May 01, 2025 am 12:19 AM

獨特的keysarecrucialinreactforoptimizingRendering和MaintainingComponentStateTegrity.1）useanaturalAlaluniqueIdentifierFromyourDataiFabable.2）ifnonaturalalientedifierexistsistsists，generateauniqueKeyniqueKeyKeyLiquekeyperaliqeyAliqueLiqueAlighatiSaliqueLiberaryLlikikeuuId.3）deversearrayIndiceSaskeyseSecialIndiceSeasseAsialIndiceAseAsialIndiceAsiall

See all articles