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