1# Cursor Control
2
3Cursor control attributes control how the cursor is displayed when the mouse pointer is placed over an element.
4
5>  **NOTE**
6>
7>  This feature is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10## cursorControl
11
12### setCursor
13
14setCursor(value: PointerStyle): void
15
16Sets the cursor style. This API is a global API.
17
18**Parameters**
19
20| Name| Type| Mandatory| Description|
21| ----- | ------ | ---- | ---- |
22| value | [PointerStyle](../apis/js-apis-pointer.md#pointerstyle) | All consistent  | Cursor style.|
23
24
25### restoreDefault
26
27restoreDefault(): void
28
29Restores the cursor to its default style. This API is a global API.
30
31
32## Example
33
34
35```ts
36// xxx.ets
37import pointer from '@ohos.multimodalInput.pointer';
38
39@Entry
40@Component
41struct CursorControlExample {
42  @State text: string = ''
43  controller: TextInputController = new TextInputController()
44
45  build() {
46    Column() {
47      Row().height(200).width(200).backgroundColor(Color.Green).position({x: 150 ,y:70})
48        .onHover((flag) => {
49          if (flag) {
50            cursorControl.setCursor(pointer.PointerStyle.EAST)
51          } else {
52            cursorControl.restoreDefault()
53          }
54        })
55      Row().height(200).width(200).backgroundColor(Color.Blue).position({x: 220 ,y:120})
56        .onHover((flag) => {
57          if (flag) {
58            cursorControl.setCursor(pointer.PointerStyle.WEST)
59          } else {
60            cursorControl.restoreDefault()
61          }
62        })
63    }.width('100%')
64  }
65}
66```
67Diagram:
68
69When the mouse pointer is placed over the blue area, the west arrow cursor is displayed.
70
71![cursor_blue](figures/cursor_blue.jpg)
72
73When the mouse pointer is placed over the green area, the east arrow cursor is displayed.
74
75![cursor_green](figures/cursor_green.jpg)
76