# Cursor

{% embed url="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor" %}

## Усі типи:

|              |           |             |             |            |          |
| ------------ | --------- | ----------- | ----------- | ---------- | -------- |
| alias        | copy      | grabbing    | ns-resize   | pointer    | text     |
| all-scroll   | crosshair | help        | nw-resize   | progress   | url      |
| auto         | default   | move        | nwse-resize | row-resize | w-resize |
| cell         | e-resize  | n-resize    | no-drop     | s-resize   | wait     |
| col-resize   | ew-resize | ne-resize   | none        | se-resize  | zoom-in  |
| context-menu | grab      | nesw-resize | not-allowed | sw-resize  | zoom-out |

## Подивитися візуально можна тут:

{% embed url="https://www.w3schools.com/cssref/tryit.php?filename=trycss_cursor" %}

## **Простий синтаксис**

```html
<span style="cursor:help">help</span>
<p style="cursor:wait">wait</p>
```

або за допомогою стилів:

```html
<!DOCTYPE html>
<html>
<head>

<style>
.cell {cursor: cell;}
.move {cursor: move;}
.pointer {cursor: pointer;}
</style>

</head>
<body>

<h1>The cursor Property</h1>
<p>Mouse over the words to change the mouse cursor.</p>

<p class="cell">cell</p>
<p class="move">move</p>
<p class="pointer">pointer</p>

</body>
</html>
```

