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