Method: Just use CSS() to set the value of the mouse style attribute "cursor" to "not-allowed". The syntax is "element object.css("cursor","not-allowed" )" or "element.css({"cursor":"not-allowed"})".
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
If you want to set the mouse prohibition style, just use the cursor attribute.
Just use CSS() to set the value of the mouse style attribute "cursor" to "not-allowed".
There are two setting syntaxes:
元素对象.css("cursor","not-allowed")
元素对象.css({"cursor":"not-allowed"})Implementation example:
<!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>
Instructions:
The cursor attribute defines the cursor shape used when the mouse pointer is placed within the bounds of an element.
When the attribute value of the cursor attribute is "not-allowed", the mouse cursor shape is a prohibited pattern.
The cursor attribute has the following values. The default value is default
| ##crosshair; | crosshair Heart | The cursor appears as a crosshair | ||
| cursor: hand; #Write two to take care of IE5, which only recognizes hand. |
The cursor indicates a connection in the form of a hint (finger) | |||
| Wait/Hourglass | The cursor indicates that the current program is busy (usually A watch or an hourglass) | |||
| help | The cursor indicates that help is available at the current location (usually a question mark or a balloon) | ##cursor: no-drop; | ||
Unable to release |
cursor: no-drop; |
##cursor: text; | ||
| Text/Edit | The cursor indicates that the current position is the text content | cursor: move; | ||
| Moveable objects | The cursor implies that something should be moved | cursor: n-resize; | ||
| Change size upward (North) | Edge can move upward (North) | cursor: s-resize; | ||
| Change size downward (South) | The edge can move downward (south) | cursor: e-resize; | ||
| Toward Right change size (East) | The edge of the box can be moved to the right (East) | cursor: w- resize; | ||
| Change the size to the left (West) | The edge can be moved to the left (West) | cursor: ne-resize; | ||
| Change size up and to the right (North East) | Cursor hint box The edge can be moved to the upper right (northeast direction) | cursor: nw-resize; | Change the size up and left (North West) |
The edge can be moved up and left (North West) |
cursor: se-resize; |
Change size down to the right (South East) |
The edge can be down to the right Move (Southeast) |
||
| ##cursor: sw-resize; | Change size down and left (South West) | The edge can move to the lower left (southwest) | ||
| Automatic | The browser sets a cursor | |||
| forbidden | cursor:not-allowed; | |||
| Processing | cursor: progress; | |||
| System default | Default cursor state (usually an arrow) | |||
|
|
Customize the url position of the cursor | Note: Customize after defining Add a general cursor at the end after the cursor, in case the cursor defined by the url cannot be used |
jQuery video tutorial
,web front-end development]
The above is the detailed content of How to use CSS() to set the mouse prohibition style in jquery. For more information, please follow other related articles on the PHP Chinese website!
What are the limitations of React?May 02, 2025 am 12:26 AMReact'slimitationsinclude:1)asteeplearningcurveduetoitsvastecosystem,2)SEOchallengeswithclient-siderendering,3)potentialperformanceissuesinlargeapplications,4)complexstatemanagementasappsgrow,and5)theneedtokeepupwithitsrapidevolution.Thesefactorsshou
React's Learning Curve: Challenges for New DevelopersMay 02, 2025 am 12:24 AMReactischallengingforbeginnersduetoitssteeplearningcurveandparadigmshifttocomponent-basedarchitecture.1)Startwithofficialdocumentationforasolidfoundation.2)UnderstandJSXandhowtoembedJavaScriptwithinit.3)Learntousefunctionalcomponentswithhooksforstate
Generating Stable and Unique Keys for Dynamic Lists in ReactMay 02, 2025 am 12:22 AMThecorechallengeingeneratingstableanduniquekeysfordynamiclistsinReactisensuringconsistentidentifiersacrossre-rendersforefficientDOMupdates.1)Usenaturalkeyswhenpossible,astheyarereliableifuniqueandstable.2)Generatesynthetickeysbasedonmultipleattribute
JavaScript Fatigue: Staying Current with React and Its ToolsMay 02, 2025 am 12:19 AMJavaScriptfatigueinReactismanageablewithstrategieslikejust-in-timelearningandcuratedinformationsources.1)Learnwhatyouneedwhenyouneedit,focusingonprojectrelevance.2)FollowkeyblogsliketheofficialReactblogandengagewithcommunitieslikeReactifluxonDiscordt
Testing Components That Use the useState() HookMay 02, 2025 am 12:13 AMTotestReactcomponentsusingtheuseStatehook,useJestandReactTestingLibrarytosimulateinteractionsandverifystatechangesintheUI.1)Renderthecomponentandcheckinitialstate.2)Simulateuserinteractionslikeclicksorformsubmissions.3)Verifytheupdatedstatereflectsin
Keys in React: A Deep Dive into Performance Optimization TechniquesMay 01, 2025 am 12:25 AMKeysinReactarecrucialforoptimizingperformancebyaidinginefficientlistupdates.1)Usekeystoidentifyandtracklistelements.2)Avoidusingarrayindicesaskeystopreventperformanceissues.3)Choosestableidentifierslikeitem.idtomaintaincomponentstateandimproveperform
What are keys in React?May 01, 2025 am 12:25 AMReactkeysareuniqueidentifiersusedwhenrenderingliststoimprovereconciliationefficiency.1)TheyhelpReacttrackchangesinlistitems,2)usingstableanduniqueidentifierslikeitemIDsisrecommended,3)avoidusingarrayindicesaskeystopreventissueswithreordering,and4)ens
The Importance of Unique Keys in React: Avoiding Common PitfallsMay 01, 2025 am 12:19 AMUniquekeysarecrucialinReactforoptimizingrenderingandmaintainingcomponentstateintegrity.1)Useanaturaluniqueidentifierfromyourdataifavailable.2)Ifnonaturalidentifierexists,generateauniquekeyusingalibrarylikeuuid.3)Avoidusingarrayindicesaskeys,especiall
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Linux new version
SublimeText3 Linux latest version
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
