1# 悬浮事件
2
3光标滑动，或者手写笔在屏幕上悬浮移动扫过组件时触发。
4
5>  **说明：**
6>
7>  - 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8>  - 目前支持通过外接鼠标、手写笔以及触控板触发。
9
10## onHover
11
12onHover(event: (isHover: boolean, event: HoverEvent) => void): T
13
14鼠标或手写笔进入或退出组件时触发hover事件。
15
16**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
17
18**系统能力：** SystemCapability.ArkUI.ArkUI.Full
19
20**参数：**
21
22| 参数名              | 类型                                | 必填 | 说明                                                         |
23| ------------------- | ----------------------------------- | ---- | ------------------------------------------------------------ |
24| isHover             | boolean                             | 是   | 表示鼠标或手写笔是否悬浮在组件上，鼠标或手写笔进入组件时为true, 离开组件时为false。 |
25| event<sup>11+</sup> | [HoverEvent](#hoverevent11对象说明) | 是   | 设置阻塞事件冒泡属性。                                       |
26
27**返回值：**
28
29| 类型 | 说明 |
30| -------- | -------- |
31| T | 返回当前组件。 |
32
33## HoverEvent<sup>11+</sup>对象说明
34
35继承于[BaseEvent](ts-gesture-customize-judge.md#baseevent对象说明)。
36
37**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
38
39**系统能力：** SystemCapability.ArkUI.ArkUI.Full
40
41| 名称              | 属性类型       | 描述      |
42| --------------- | ---------- | ------- |
43| stopPropagation | () => void | 阻塞事件冒泡。 |
44
45## 示例
46
47该示例通过按钮设置了悬浮事件，鼠标悬浮可触发onHover事件修改按钮颜色。
48
49```ts
50// xxx.ets
51@Entry
52@Component
53struct HoverEventExample {
54  @State hoverText: string = 'no hover';
55  @State color: Color = Color.Blue;
56
57  build() {
58    Column({ space: 20 }) {
59      Button(this.hoverText)
60        .width(180).height(80)
61        .backgroundColor(this.color)
62        .onHover((isHover: boolean, event: HoverEvent) => {
63          // 通过onHover事件动态修改按钮在是否有鼠标或手写笔悬浮时的文本内容与背景颜色
64          // 通过event.sourceTool区分设备是鼠标还是手写笔
65          if (isHover) {
66            if (event.sourceTool == SourceTool.Pen) {
67              this.hoverText = 'pen hover';
68              this.color = Color.Pink;
69            } else if (event.sourceTool == SourceTool.MOUSE) {
70              this.hoverText = 'mouse hover';
71              this.color = Color.Red;
72            }
73          } else {
74            this.hoverText = 'no hover';
75            this.color = Color.Blue;
76          }
77        })
78    }.padding({ top: 30 }).width('100%')
79  }
80}
81```
82
83示意图：
84
85未悬浮时的文本内容与背景颜色：
86
87 ![nohover](figures/no-hover.png)
88
89手写笔悬浮时改变文本内容与背景颜色：
90
91 ![penhover](figures/pen-hover.png)
92