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```ts 29// xxx.ets 30@Entry 31@Component 32struct HoverExample { 33 @State isHoverVal: boolean = false 34 35 build() { 36 Column({ space: 5 }) { 37 Column({ space: 5 }) { 38 Text('Scale').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 80 }) 39 Column() 40 .width('80%').height(200).backgroundColor(Color.Gray) 41 .position({ x: 40, y: 120 }) 42 .hoverEffect(HoverEffect.Scale) 43 .onHover((isHover?: boolean) => { 44 console.info('Scale isHover: ' + isHover as string) 45 this.isHoverVal = isHover as boolean 46 }) 47 48 Text('Board').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 380 }) 49 Column() 50 .width('80%').height(200).backgroundColor(Color.Gray) 51 .hoverEffect(HoverEffect.Highlight) 52 .position({ x: 40, y: 420 }) 53 .onHover((isHover?: boolean) => { 54 console.info('Highlight isHover: ' +isHover as string) 55 this.isHoverVal = isHover as boolean 56 }) 57 } 58 .hoverEffect(HoverEffect.None) 59 .width('100%').height('100%').border({ width: 1 }) 60 .onHover((isHover?: boolean) => { 61 console.info('HoverEffect.None') 62 this.isHoverVal = isHover as boolean 63 }) 64 } 65 } 66} 67``` 68