1# 悬浮态效果
2
3设置组件的鼠标悬浮态显示效果。
4
5>  **说明：**
6>
7> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9## hoverEffect
10
11hoverEffect(value: HoverEffect)
12
13设置组件的鼠标悬浮态显示效果。
14
15**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
16
17**系统能力：** SystemCapability.ArkUI.ArkUI.Full
18
19**参数：**
20
21| 参数名 | 类型                                             | 必填 | 说明                                                         |
22| ------ | ------------------------------------------------ | ---- | ------------------------------------------------------------ |
23| value  | [HoverEffect](ts-appendix-enums.md#hovereffect8) | 是   | 设置当前组件悬停态下的悬浮效果。<br/>默认值：HoverEffect.Auto |
24
25
26## 示例
27
28该示例通过hoverEffect设置组件的鼠标悬浮态显示效果。
29
30```ts
31// xxx.ets
32@Entry
33@Component
34struct HoverExample {
35  @State isHoverVal: boolean = false
36
37  build() {
38    Column({ space: 5 }) {
39      Column({ space: 5 }) {
40        Text('Scale').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 80 })
41        Column()
42          .width('80%').height(200).backgroundColor(Color.Gray)
43          .position({ x: 40, y: 120 })
44          .hoverEffect(HoverEffect.Scale)
45          .onHover((isHover?: boolean) => {
46            console.info('Scale isHover: ' + isHover as string)
47            this.isHoverVal = isHover as boolean
48          })
49
50        Text('Board').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 380 })
51        Column()
52          .width('80%').height(200).backgroundColor(Color.Yellow)
53          .hoverEffect(HoverEffect.Highlight)
54          .position({ x: 40, y: 420 })
55          .onHover((isHover?: boolean) => {
56            console.info('Highlight isHover: ' +isHover as string)
57            this.isHoverVal = isHover as boolean
58          })
59      }
60      .hoverEffect(HoverEffect.None)
61      .width('100%').height('100%').border({ width: 1 })
62      .onHover((isHover?: boolean) => {
63        console.info('HoverEffect.None')
64        this.isHoverVal = isHover as boolean
65      })
66    }
67  }
68}
69```
70![onHover](figures/onHover.gif)
71