1# Hover Event 2 3A hover event is triggered when the cursor slides over a component or when a stylus hovers and moves over the screen. 4 5> **NOTE** 6> 7> - The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8> - Currently, only an external mouse device, stylus, or touchpad can be used to trigger a hover event. 9 10## onHover 11 12onHover(event: (isHover: boolean, event: HoverEvent) => void): T 13 14Triggered when the mouse pointer or stylus enters or leaves the component. 15 16**Atomic service API**: This API can be used in atomic services since API version 11. 17 18**System capability**: SystemCapability.ArkUI.ArkUI.Full 19 20**Parameters** 21 22| Name | Type | Mandatory| Description | 23| ------------------- | ----------------------------------- | ---- | ------------------------------------------------------------ | 24| isHover | boolean | Yes | Whether the mouse pointer or stylus is hovering over the component. The value **true** means that the mouse pointer or stylus enters the component, and **false** means that the mouse pointer or stylus leaves the component.| 25| event<sup>11+</sup> | [HoverEvent](#hoverevent10) | Yes | Event bubbling. | 26 27**Return value** 28 29| Type| Description| 30| -------- | -------- | 31| T | Current component.| 32 33## onHoverMove<sup>15+</sup> 34 35onHoverMove(event: Callback<HoverEvent>): T 36 37Triggered when a stylus hovers over the component. 38 39**Atomic service API**: This API can be used in atomic services since API version 15. 40 41**System capability**: SystemCapability.ArkUI.ArkUI.Full 42 43**Parameters** 44 45| Name | Type | Mandatory| Description | 46| ------------------- | ----------------------------------- | ---- | ------------------------------------------------------------ | 47| event | [HoverEvent](#hoverevent10) | Yes |Event bubbling property and the position coordinates of the stylus. | 48 49**Return value** 50 51| Type| Description| 52| -------- | -------- | 53| T | Current component.| 54 55## HoverEvent<sup>10+</sup> 56 57Inherits from [BaseEvent](ts-gesture-customize-judge.md#baseevent8). 58 59**System capability**: SystemCapability.ArkUI.ArkUI.Full 60 61| Name| Type| Read Only| Optional| Description| 62| --------------- | ---------- | ----- | ----- | -------------------- | 63| x<sup>15+</sup> |number|No|Yes|X coordinate of the stylus's position relative to the upper left corner of the component being touched.<br> **Atomic service API**: This API can be used in atomic services since API version 15.| 64| y<sup>15+</sup> |number|No|Yes|Y coordinate of the stylus's position relative to the upper left corner of the component being touched.<br> **Atomic service API**: This API can be used in atomic services since API version 15.| 65| windowX<sup>15+</sup> |number|No|Yes|X coordinate of the stylus's position relative to the upper left corner of the application window.<br> **Atomic service API**: This API can be used in atomic services since API version 15.| 66| windowY<sup>15+</sup> |number|No|Yes|Y coordinate of the stylus's position relative to the upper left corner of the application window.<br> **Atomic service API**: This API can be used in atomic services since API version 15.| 67| displayX<sup>15+</sup> |number|No|Yes|X coordinate of the stylus's position relative to the upper left corner of the display.<br> **Atomic service API**: This API can be used in atomic services since API version 15.| 68| displayY<sup>15+</sup> |number|No|Yes|Y coordinate of the stylus's position relative to the upper left corner of the display.<br> **Atomic service API**: This API can be used in atomic services since API version 15.| 69| stopPropagation | () => void |No|No| Stops the event from bubbling upwards or downwards.<br> **Atomic service API**: This API can be used in atomic services since API version 10.| 70 71## Example 72 73### Example 1: Using onHover 74 75This example demonstrates how to set the **onHover()** event on a button. When the mouse or stylus hovers over the button, the **onHover** event is triggered to dynamically change the text content and background color of the button. 76 77```ts 78// xxx.ets 79@Entry 80@Component 81struct HoverEventExample { 82 @State hoverText: string = 'no hover'; 83 @State color: Color = Color.Blue; 84 85 build() { 86 Column({ space: 20 }) { 87 Button(this.hoverText) 88 .width(180).height(80) 89 .backgroundColor(this.color) 90 .onHover((isHover: boolean, event: HoverEvent) => { 91 // Use the onHover event to dynamically change the text content and background color of a button when the mouse pointer or stylus is hovered on it. 92 // Use event.sourceTool to determine whether the device is a mouse device or stylus. 93 if (isHover) { 94 if (event.sourceTool == SourceTool.Pen) { 95 this.hoverText = 'pen hover'; 96 this.color = Color.Pink; 97 } else if (event.sourceTool == SourceTool.MOUSE) { 98 this.hoverText = 'mouse hover'; 99 this.color = Color.Red; 100 } 101 } else { 102 this.hoverText = 'no hover'; 103 this.color = Color.Blue; 104 } 105 }) 106 }.padding({ top: 30 }).width('100%') 107 } 108} 109``` 110 111Diagrams: 112 113The figure below shows how the button looks when not hovered: 114 115  116 117The figure below shows how the button looks like when a stylus hovers on it. 118 119  120 121### Example 2: Using onHoverMove 122 123This example demonstrates how to use the **onHoverMove()** event to display the current position of a stylus when it hovers over a button. 124 125```ts 126// xxx.ets 127@Entry 128@Component 129struct OnHoverMoveEventExample { 130 @State hoverMoveText: string = ''; 131 132 build() { 133 Column({ space: 20 }) { 134 Button('onHoverMove') 135 .width(180).height(80) 136 .onHoverMove((event: HoverEvent) => { 137 this.hoverMoveText = 'onHoverMove:\nXY = (' + event.x + ', ' + event.y + ')' + 138 '\nwindowXY = (' + event.windowX + ', ' + event.windowY + ')' + 139 '\ndisplayXY = (' + event.displayX + ', ' + event.displayY + ')'; 140 }) 141 142 Text(this.hoverMoveText) 143 }.padding({ top: 30 }).width('100%') 144 } 145} 146``` 147 148Diagrams: 149 150The UI continuously updates to show the position of the stylus tip. 151 152 153
