Home >Web Front-end >CSS Tutorial >CSS cursor property example
CSS cursor property example
- WBOYforward
- 2023-09-10 14:53:021294browse
With CSS cursor properties, you can display crosshairs or plus signs, pointers, and more. You can try running the following code to implement the cursor property in CSS -
Example
<html>
<head>
</head>
<body>
<div style = "cursor:auto">Auto</div>
<div style = "cursor:crosshair">Crosshair</div>
<div style = "cursor:default">Default</div>
<div style = "cursor:pointer">Pointer</div>
<div style = "cursor:move">Move</div>
<div style = "cursor:e-resize">e-resize</div>
<div style = "cursor:ne-resize">ne-resize</div>
<div style = "cursor:nw-resize">nw-resize</div>
<div style = "cursor:n-resize">n-resize</div>
<div style = "cursor:se-resize">se-resize</div>
<div style = "cursor:sw-resize">sw-resize</div>
<div style = "cursor:s-resize">s-resize</div>
<div style = "cursor:w-resize">w-resize</div>
<div style = "cursor:text">text</div>
<div style = "cursor:wait">wait</div>
<div style = "cursor:help">help</div>
</body>
</html>We have added the following values above-
| Value | Description |
|---|---|
| The shape of the cursor depends on ends in the context area in which it is located. For example, "I" on text, "hand" on link, etc. | |
| Crosshair or plus sign | |
| Arrow | |
| A pointing hand (in IE 4 this value is the hand). | |
| "I" column | |
| The edge of the cursor indication box will Move to the right (east). | |
| The edge of the cursor indication box will move up and to the right (North/East). | |
| The edge of the cursor indication box will move up and to the left (North/West). | |
| The cursor indicates that the edge of the box is to be moved up (north). | |
| The cursor moves the edge of the indicated box down and to the right (south/east). | |
| The cursor moves the edge of the box down and to the left (south/west). | |
| The edge of the cursor indication box moves downward (south)). | |
| The edge of the cursor indication box moves to the left (west)). | |
| I column. | |
| An hourglass. | |
| Question mark or balloon, perfect for use on the help button. | |
| Cursor image file source. |
The above is the detailed content of CSS cursor property example. For more information, please follow other related articles on the PHP Chinese website!
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete