1# Accessibility Hover Event
2
3When accessibility mode is enabled, touch events are converted into accessibility hover events.
4
5>  **NOTE**
6>
7>  - The initial APIs of this module are supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.
8>  - Currently, conversion into accessibility hover events can only be initiated by enabling accessibility mode.
9
10## onAccessibilityHover
11
12onAccessibilityHover(callback: AccessibilityCallback): T
13
14Invoked in accessibility mode when a single finger touches the bound component.
15
16**System capability**: SystemCapability.ArkUI.ArkUI.Full
17
18**Parameters**
19| Name       | Type                   | Mandatory | Description                         |
20| ---------- | -------------------------- | ------- | ----------------------------- |
21| callback      | [AccessibilityCallback](#accessibilitycallback) | Yes  |  Callback invoked in accessibility mode when a single finger touches the bound component.|
22
23**Return value**
24
25| Type| Description|
26| -------- | -------- |
27| T | Current component.|
28
29## AccessibilityCallback
30
31type AccessibilityCallback = (isHover: boolean, event: AccessibilityHoverEvent) => void
32
33Represents the accessibility hover event callback, which is effective when accessibility mode is enabled.
34
35**System capability**: SystemCapability.ArkUI.ArkUI.Full
36
37**Parameters**
38
39| Name             | Type                               | Mandatory| Description                                                        |
40| ------------------- | ----------------------------------- | ---- | ------------------------------------------------------------ |
41| isHover             | boolean                             | Yes  | Whether a finger is hovering over the component in accessibility mode. The value **true** means that the finger enters the component, and **false** means that the finger leaves the component.|
42| event | [AccessibilityHoverEvent](#accessibilityhoverevent) | Yes  | **AccessibilityHoverEvent** object.                                  |
43
44## AccessibilityHoverEvent
45
46Inherits from [BaseEvent](ts-gesture-customize-judge.md#baseevent).
47
48**System capability**: SystemCapability.ArkUI.ArkUI.Full
49
50| Name             | Type      | Description     |
51| --------------- | ---------- | ------- |
52| type             | [AccessibilityHoverType](#accessibilityhovertype) | Accessibility hover type.               |
53| x                      | number                         | X coordinate of the finger's position relative to the upper left corner of the component being touched.<br>Unit: vp<br>|
54| y                      | number                         | Y coordinate of the finger's position relative to the upper left corner of the component being touched.<br>Unit: vp<br>|
55| windowX                | number                         | X coordinate of the finger's position relative to the upper left corner of the application window.<br>Unit: vp<br>|
56| windowY                | number                         | Y coordinate of the finger's position relative to the upper left corner of the application window.<br>Unit: vp<br>|
57| displayX               | number                         | X coordinate of the finger's position relative to the upper left corner of the display.<br>Unit: vp<br>|
58| displayY               | number                         | Y coordinate of the finger's position relative to the upper left corner of the display.<br>Unit: vp<br>|
59
60## AccessibilityHoverType
61
62Enumerates the accessibility hover types.
63
64| Name   | Value  | Description                              |
65| ------- | ---- | ---------------------------------- |
66| HOVER_ENTER | 0    | A finger is pressed.|
67| HOVER_MOVE  | 1    | The touch moves.|
68| HOVER_EXIT  | 2    | The finger is lifted.|
69| HOVER_CANCEL | 3    | The current event is canceled.|
70
71## Example
72
73```ts
74// xxx.ets
75@Entry
76@Component
77struct OnAccessibilityHoverEventExample {
78  @State hoverText: string = 'no hover';
79  @State color: Color = Color.Blue;
80
81  build() {
82    Column({ space: 20 }) {
83      Button(this.hoverText)
84        .width(180).height(80)
85        .backgroundColor(this.color)
86        .onAccessibilityHover((isHover: boolean, event: AccessibilityHoverEvent) => {
87          // Use the onAccessibilityHover event to dynamically change the text content and background color of a button when the finger is hovered on it.
88          if (isHover) {
89            this.hoverText = 'hover';
90            this.color = Color.Pink;
91          } else {
92            this.hoverText = 'no hover';
93            this.color = Color.Blue;
94          }
95        })
96    }.padding({ top: 30 }).width('100%')
97  }
98}
99```
100