Home >Web Front-end >CSS Tutorial >How to make the mouse look like a small hand using css

How to make the mouse look like a small hand using css

青灯夜游Original: 2021-03-04 17:43:1744993browse

In CSS, you can use the cursor attribute to change the mouse into a small hand style. The basic syntax is "cursor:pointer;". The cursor attribute defines the cursor shape used when the mouse pointer is placed within the bounds of an element; setting the value to "pointer" makes the mouse smaller.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css mouse becomes smaller hand

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			p{
				border: 1px solid red;
			}
			#cursor2{
				cursor:pointer;/*鼠标变小手*/
				}
		</style>
	</head>
	<body>
		<p id="cursor1">测试文本！</p>
		<p id="cursor2">测试文本！</p>
	</body>
</html>

Rendering:

How to make the mouse look like a small hand using css

##css cursor attribute

The cursor attribute defines the cursor shape used when the mouse pointer is placed within the bounds of an element [Recommended tutorial:

CSS Video Tutorial]

Attribute value:

ValueDescription##urlThe URL of the custom cursor to be used. defaultautocrosshairpointermovee-resizene-resizenw-resizen-resizese-resizesw-resizes-resizew-resizetextwaithelpFor more programming related knowledge, please visit:


	Note: Always define a normal cursor at the end of this list in case there is no available cursor defined by URL.
Default cursor (usually an arrow)
Default . The cursor set by the browser.
The cursor is rendered as crosshairs.
The cursor is rendered as a pointer (a hand) indicating the link
This cursor indicates that an object can be moved.
This cursor indicates that the edge of the rectangular box can be moved to the right (east).
This cursor indicates that the edge of the rectangle can be moved up and to the right (North/East).
This cursor indicates that the edge of the rectangle can be moved up and to the left (North/West).
This cursor indicates that the edge of the rectangular box can be moved up (north).
This cursor indicates that the edge of the rectangle can be moved down and to the right (south/east).
This cursor indicates that the edge of the rectangle can be moved down and to the left (south/west).
This cursor indicates that the edge of the rectangular box can be moved down (south).
This cursor indicates that the edge of the rectangular box can be moved to the left (west).
This cursor indicates text.
This cursor indicates that the program is busy (usually a watch or hourglass).
This cursor indicates available help (usually a question mark or a balloon).

Programming Video

! !

The above is the detailed content of How to make the mouse look like a small hand using css. 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：How to adjust line spacing in cssNext article：How to adjust line spacing in css

See more

How to make the mouse look like a small hand using css

Related articles