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## hoverEffect
10
11hoverEffect(value: HoverEffect)
12
13Sets the hover effect of the component in hover state.
14
15**System capability**: SystemCapability.ArkUI.ArkUI.Full
16
17**Parameters**
18
19| Name| Type                                            | Mandatory| Description                                                        |
20| ------ | ------------------------------------------------ | ---- | ------------------------------------------------------------ |
21| value  | [HoverEffect](ts-appendix-enums.md#hovereffect8) | Yes  | Hover effect of the component in hover state.<br>Default value: **HoverEffect.Auto**|
22
23
24## Example
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