• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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**Atomic service API**: This API can be used in atomic services since API version 11.
16
17**System capability**: SystemCapability.ArkUI.ArkUI.Full
18
19**Parameters**
20
21| Name| Type                                            | Mandatory| Description                                                        |
22| ------ | ------------------------------------------------ | ---- | ------------------------------------------------------------ |
23| value  | [HoverEffect](ts-appendix-enums.md#hovereffect8) | Yes  | Hover effect of the component in hover state.<br>Default value: **HoverEffect.Auto**|
24
25
26## Example
27
28This example demonstrates how to set the hover effect for components using **hoverEffect**.
29
30```ts
31// xxx.ets
32@Entry
33@Component
34struct HoverExample {
35  @State isHoverVal: boolean = false
36
37  build() {
38    Column({ space: 5 }) {
39      Column({ space: 5 }) {
40        Text('Scale').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 80 })
41        Column()
42          .width('80%').height(200).backgroundColor(Color.Gray)
43          .position({ x: 40, y: 120 })
44          .hoverEffect(HoverEffect.Scale)
45          .onHover((isHover?: boolean) => {
46            console.info('Scale isHover: ' + isHover as string)
47            this.isHoverVal = isHover as boolean
48          })
49
50        Text('Board').fontSize(20).fontColor(Color.Gray).width('90%').position({ x: 0, y: 380 })
51        Column()
52          .width('80%').height(200).backgroundColor(Color.Yellow)
53          .hoverEffect(HoverEffect.Highlight)
54          .position({ x: 40, y: 420 })
55          .onHover((isHover?: boolean) => {
56            console.info('Highlight isHover: ' +isHover as string)
57            this.isHoverVal = isHover as boolean
58          })
59      }
60      .hoverEffect(HoverEffect.None)
61      .width('100%').height('100%').border({ width: 1 })
62      .onHover((isHover?: boolean) => {
63        console.info('HoverEffect.None')
64        this.isHoverVal = isHover as boolean
65      })
66    }
67  }
68}
69```
70![onHover](figures/onHover.gif)
71