1# Hover Effect 2 3The hover effect is applied to a component in hover state. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Attributes 11 12| Name | Type | Description | 13| ----------- | --------------------------------------------------| ------------------------------------------------ | 14| hoverEffect | [HoverEffect](ts-appendix-enums.md#hovereffect8) | Hover effect of the component in hover state.<br>Default value: **HoverEffect.Auto**| 15 16 17## Example 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