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