Home > Article > Web Front-end > How to use CSS() to set the mouse prohibition style in jquery

How to use CSS() to set the mouse prohibition style in jquery

青灯夜游Original: 2022-05-07 20:30:231920browse

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>

How to use CSS() to set the mouse prohibition style in jquery

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

##cursor: pointer; cursor: wait;cursor: help;##cursor: no-drop;##cursor: auto;AutomaticThe browser sets a cursor##cursor:not-allowed;cursor: progress;cursor: default ;cursor: url(' # '); # = Cursor file address You may say that the cursor attribute has so many values , how to remember it? In fact, you don’t need to worry. In actual development, we generally only use the two attribute values of “default” and “pointer”, and the others are generally rarely used. If you really can't help but still need something else, just come back and check this kind of table.

##crosshair;	crosshair Heart	The cursor appears as a crosshair
cursor: hand; #Write two to take care of IE5, which only recognizes hand. 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)
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)

forbidden	cursor:not-allowed;
Processing	cursor: progress;
System default	Default cursor state (usually an arrow)
#User-defined (animation available)	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

[Recommended learning:

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jquery has several basic selectorsNext article：jquery has several basic selectors

See more

How to use CSS() to set the mouse prohibition style in jquery

Related articles