How to use cursor? How to use the cursor attribute in CSS and how to parse optional values

When laying out a page, CSS is an essential part of the work. I often hear people say: HTML is what a person looks like without makeup, and adding CSS is what a person looks like after makeup. This sentence is easy to understand and explains the relationship between CSS and HTML very well. There are many attributes in CSS. Today we will focus on one attribute, the CSS cursor attribute, and its many optional values. For example, the cursor hand shape uses the cursor:pointer attribute.

How to use cursor?

1. CSS cursor basic syntax

What is the cursor attribute: refers to the cursor shape that appears when the mouse pointer is placed within the boundary of an element. It Including question marks, small hands and other shapes.
When using it, you can insert style="cursor: a certain attribute value" into any tag you want to add, or you can add it in the CSS style.

For example: 68d12f98743700eaf58b60240b5a03c5pointer, small hand shape94b3e26ee717c64999d7867364b1b4a3 , bb618d9f377907859c4313a877432bf6help, help Shape 5db79b134e9f6b82c0b36e0489ee08ed .

The attribute value of cursor has more than a dozen optional values. Just choose the appropriate value according to your needs during work.

2. CSS cursor attribute value

1. The most commonly used cursor: pointer, the cursor takes on the shape of a small hand.

<p style="cursor:pointer">pointer</p>

2. cursor: help, question mark cursor

<p style="cursor:help;">pointer</p>

3. cursor: crosshair, cross cursor

<p style="cursor:crosshair;">pointer</p>

will introduce these commonly used and other attribute values ​​​​in detail They are all written in the same way, just change the attribute value. Please see below for the specific values ​​and what they mean.

default: The default cursor, usually an arrow
auto: Default, the cursor set by the browser
crosshair: The cursor represents a crosshair
pointer: The cursor represents a pointer (a pointer) indicating a link Hand)
move: The cursor indicates that the object can be moved
e-resize: The cursor indicates that the edge of the rectangular box can be moved to the right
ne-resize: The cursor indicates that the edge of the rectangular box can be moved up and to the right Move
nw-resize: The cursor indicates that the edge of the rectangular box can be moved up and to the left
n-resize: The cursor indicates that the edge of the rectangular box can be moved upward
se-resize: The cursor indicates the edge of the rectangular box The edge can be moved down and to the right
sw-resize: The cursor indicates that the edge of the rectangular box can be moved down and to the left
s-resize: The cursor indicates that the edge of the rectangular box can be moved down
w-resize: The cursor indicates that the edge of the rectangular box can be moved to the left
text: The cursor indicates text
wait: The cursor indicates that the program is busy (usually a watch or hourglass)
help: Cursor indicates Help (usually a question mark)

The above mainly introduces the usage of the cursor attribute in CSS and the meanings of different attribute values. Beginners can try different values ​​​​in the editor to see what happens. The effect, I hope it can help you.

The above is the detailed content of How to use cursor? How to use the cursor attribute in CSS and how to parse optional values. For more information, please follow other related articles on the PHP Chinese website!