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